/* ==========================================================================
   MINIATURES — system marki
   Jeden arkusz. Ładowany JAKO OSTATNI, po wszystkich plikach Elementora.
   Zastępuje: miniatures-luxury.css, process-editorial.css, gallery-editorial.css
   oraz sprzeczne bloki w miniatures-prototype.css.
   ========================================================================== */

/* --- 1. TOKENY ----------------------------------------------------------- */
:root{
  /* Atrament — ciepła czerń zamiast neutralnej szarości */
  --mn-ink:      #1B1714;
  --mn-ink-2:    #4A423B;
  --mn-ink-3:    #7A7067;

  /* Papier — kość słoniowa, bez różu */
  --mn-paper:    #FBF8F3;
  --mn-mist:     #F2ECE2;
  --mn-line:     #E2D9CA;

  /* Noc — tło ciemnych sekcji */
  --mn-night:    #17140F;
  --mn-night-2:  #241E16;

  /* Złoto — akcent wiodący. Nigdy jako wypełnienie dużych płaszczyzn. */
  --mn-gold:     #B08D57;
  --mn-gold-lt:  #E3C78F;
  --mn-gold-dk:  #8A6C3E;
  /* Złoto do TEKSTU na jasnym tle. --mn-gold-dk daje na mgle 4,16 — poniżej
     progu AA; ten wariant przechodzi z zapasem. */
  --mn-gold-txt: #6B5026;

  /* Róż — akcent wspierający, wyłącznie w sekcji procesu.
     Przygaszony i ciepły (w stronę terakoty), żeby trzymał się bursztynu
     i złota. Zimny, cukierkowy róż z prototypu rozbijał paletę. */
  --mn-rose:     #D9B3A8;
  --mn-rose-dp:  #A8776A;
  --mn-rose-bg:  #FBF1EC;

  /* Typografia */
  --mn-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mn-sans:     'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Rytm 8 px — jedyna dozwolona skala odstępów */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;   --s8: 8rem;

  /* Siatka — jedna oś dla całej strony */
  --mn-max:    1240px;
  --mn-gutter: clamp(1.5rem, 5vw, 4rem);

  /* Miara wiersza */
  --mn-measure-lead: 46ch;
  --mn-measure-body: 64ch;

  --mn-radius: 999px;
  --mn-ease: cubic-bezier(.2,.7,.2,1);

  /* --- System tła ---------------------------------------------------------
     Sześć sekcji, sześć wartości tonalnych — żadne dwie sąsiadujące nie są
     takie same. Rytm: ciemno → jasno → jasno → ciemno → jasno → ciemno.
     Wcześniej trzy ostatnie sekcje były ciemne, a dwie z nich praktycznie
     identyczne, przez co koniec strony się zlewał.
     Do każdego tła dokładamy JEDNO miękkie źródło światła w złocie. Jego
     pozycja obraca się wraz z przewijaniem (prawy górny → lewy górny → prawy
     dolny → prawy górny → lewy dolny → środek), więc światło „wędruje” przez
     stronę zamiast stać w tym samym rogu. */
  --mn-bg-noc:     #0E0C09;  /* hero i sekcja zamykająca */
  --mn-bg-swit:    #F8EDE7;  /* proces — blush */
  --mn-bg-dzien:   #FBF8F3;  /* kamienie — kość słoniowa */
  --mn-bg-zmierzch:#14110D;  /* formularz */
  --mn-bg-mgla:    #F2ECE2;  /* FAQ */
}

/* --- 2. PODSTAWA --------------------------------------------------------- */
/* Mobile-first: domyślnie bez snapa (na telefonie formularz jest wyższy niż
   ekran i snap by go uwięził). Włączamy go dopiero tam, gdzie sekcja realnie
   mieści się w oknie — patrz reguła @media niżej.
   `scroll-behavior: smooth` jest zdjęte celowo: biło się z animacją snapa.
   Płynność kotwic z menu dokłada JS przez scrollIntoView. */
html{
  scroll-snap-type: none;
  /* !important — miniatures-prototype.css ustawia `smooth`, co dublowało
     animację snapa i dawało wrażenie szarpania. */
  scroll-behavior: auto !important;
  -webkit-text-size-adjust: 100%;
}
/* Próg 820 px, nie 700. Poniżej tej wysokości treść kilku sekcji (galeria,
   FAQ z pięcioma pytaniami, formularz) nie mieści się w jednym ekranie i
   sekcje rosną. Snap do sekcji WYŻSZEJ niż okno oznacza, że użytkownik nie
   może dojechać do jej dolnej części — dlatego tam go wyłączamy i pozwalamy
   stronie przewijać się normalnie. */
@media (min-width: 900px) and (min-height: 820px){
  html{ scroll-snap-type: y mandatory; }
}
body{
  background: var(--mn-paper);
  color: var(--mn-ink);
  font-family: var(--mn-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--mn-gold-lt); color: var(--mn-night); }

/* --- 3. SEKCJA = JEDEN EKRAN --------------------------------------------- */
.elementor-section{
  position: relative;
  min-height: 100svh !important;
  height: auto !important;
  display: flex;
  align-items: center;
  /* Wcięcie górne większe od dolnego z dwóch powodów: treść musi zejść spod
     pływającego headera, a blok osadzony optycznie nad środkiem czyta się
     lepiej niż wyśrodkowany geometrycznie. Ten sam rytm we wszystkich sekcjach. */
  padding-top: clamp(6rem, 12vh, 7.5rem) !important;
  padding-bottom: clamp(2.5rem, 6vh, 5rem) !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
/* Znosi pływający złoty myślnik doklejany do sekcji oraz logo doklejone do hero
   (inline CSS wtyczki) — logo przejął header, etykiety przejęły nadkreślenia. */
.elementor-section::before{ content: none !important; }

/* JEDNA oś pionowa. Wszystkie sekcje startują od tej samej krawędzi.
   Margines boczny wyznacza WYŁĄCZNIE kontener — sekcja i widget-wrap muszą
   oddać swoje wcięcia, inaczej sumują się (20 + 24 + 10 px) i treść odjeżdża
   od logo w headerze. */
.elementor-section{ padding-inline: 0 !important; }
.elementor-section > .elementor-container{
  max-width: var(--mn-max) !important;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--mn-gutter);
}
.elementor-section > .elementor-container > .elementor-column{ min-width: 0; }
.elementor-section .elementor-widget-wrap{ min-width: 0; padding: 0 !important; }

/* --- 4. TYPOGRAFIA ------------------------------------------------------- */
/* Specyficzność podniesiona celowo — Elementor narzuca Roboto z poziomu kitu. */
.elementor-section .elementor-widget-heading .elementor-heading-title,
.elementor-section h1,
.elementor-section h2{
  font-family: var(--mn-display) !important;
  font-weight: 300 !important;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* Interlinia: Cormorant Garamond zajmuje ok. 1,21 × rozmiar fontu na pełny
   wykrój znaku. Przy 0,95 kolejne wiersze nachodziły na siebie o 27 px —
   ogonek „ę” i zejście „y” wchodziły w wiersz niżej, co w polskim tekście
   widać natychmiast. 1,08 / 1,10 zostawia zwarty rytm bez kolizji. */
.elementor-section h1{
  font-size: clamp(3.25rem, 7vw, 6.5rem) !important;
  line-height: 1.08 !important;
  max-width: 15ch;
}
.elementor-section h2{
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  line-height: 1.1 !important;
  max-width: 16ch;
  margin-bottom: var(--s4);
}

/* Nadkreślenie — mały, rozstrzelony podpis nad nagłówkiem */
.elementor-section h2::before{
  font-family: var(--mn-sans);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mn-gold);
  display: block;
  margin-bottom: var(--s3);
}

/* Tekst ciągły — miara wiersza pilnowana w ch, nie w px */
.elementor-section .elementor-widget-text-editor{
  font-family: var(--mn-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--mn-ink-2);
  max-width: var(--mn-measure-body);
}
.elementor-section .elementor-widget-text-editor strong{
  font-weight: 500;
  color: var(--mn-ink);
}

/* --- 5. PRZYCISKI (jeden komponent na całą stronę) ------------------------
   Pigułka, nie prostokąt: krągłość odbija kształt koralika i zdejmuje
   sztywność ostrej ramki. Obrys znika — nośnikiem jest wypełnienie i cień.
   JEDNA definicja obsługuje CTA w hero, przycisk w nawigacji i przyciski
   formularza. Wcześniej każde z tych miejsc miało własny zestaw reguł i tylko
   hero dostawało poświatę oraz kreskę.
   -------------------------------------------------------------------------- */
.elementor-section .elementor-button,
.mn-nav__cta,
.miniatures-form button,
.mn-newsletter button{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85em;
  font-family: var(--mn-sans) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 1.15em 2.4em !important;
  border: 1px solid var(--mn-gold) !important;
  border-radius: var(--mn-radius) !important;
  background: var(--mn-gold) !important;
  color: var(--mn-night) !important;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(176,141,87,.28);
  transition: background .3s var(--mn-ease),
              border-color .3s var(--mn-ease),
              transform .3s var(--mn-ease),
              box-shadow .3s var(--mn-ease);
}
/* Kreska dostawiana przez CSS — w markupie jest sam tekst */
.elementor-section .elementor-button::after,
.mn-nav__cta::after,
.miniatures-form button::after,
.mn-newsletter button::after{
  content: '';
  width: 18px;
  height: 1px;
  flex: none;
  background: currentColor;
  transition: width .3s var(--mn-ease);
}
/* Smuga światła przechodząca w poprzek przy najechaniu */
.elementor-section .elementor-button::before,
.mn-nav__cta::before,
.miniatures-form button::before,
.mn-newsletter button::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--mn-ease);
}
.elementor-section .elementor-button:hover,
.mn-nav__cta:hover,
.miniatures-form button:hover,
.mn-newsletter button:hover{
  background: var(--mn-gold-lt) !important;
  border-color: var(--mn-gold-lt) !important;
  color: var(--mn-night) !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(176,141,87,.42);
}
.elementor-section .elementor-button:hover::after,
.mn-nav__cta:hover::after,
.miniatures-form button:hover::after,
.mn-newsletter button:hover::after{ width: 30px; }
.elementor-section .elementor-button:hover::before,
.mn-nav__cta:hover::before,
.miniatures-form button:hover::before,
.mn-newsletter button:hover::before{ transform: translateX(120%); }
.elementor-section .elementor-button:active,
.mn-nav__cta:active,
.miniatures-form button:active,
.mn-newsletter button:active{ transform: translateY(-1px); }
/* miniatures-prototype.css ma `.elementor-section:first-child .elementor-button`
   (0,3,0) i wygrywało kolorem tekstu z regułą wspólną — stąd hero miało
   rgb(27,23,20) zamiast rgb(23,20,15). Wyrównanie specyficzności. */
.elementor-section:first-child .elementor-button,
.elementor-section:first-child .elementor-button:hover{ color: var(--mn-night) !important; }
.elementor-section .elementor-button:focus-visible,
.mn-nav__cta:focus-visible,
.miniatures-form button:focus-visible,
.mn-newsletter button:focus-visible{
  outline: 2px solid var(--mn-gold-lt);
  outline-offset: 4px;
}

/* --- 5b. HEADER (mobile-first) -------------------------------------------
   Bazowe reguły opisują telefon. Desktop dokładany jest w @media (min-width),
   nie odejmowany w max-width.
   -------------------------------------------------------------------------- */
.mn-skip{
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--mn-night);
  color: #fff;
  font-family: var(--mn-sans);
  font-size: .875rem;
  text-decoration: none;
}
.mn-skip:focus{ left: var(--mn-gutter); top: var(--s2); }

/* Pływający box z matowym szkłem — nie dotyka żadnej krawędzi okna.
   UWAGA: żadnego `transform` na tym elemencie. Transform (a także sam
   backdrop-filter) tworzy blok zawierający dla potomków `position: fixed`,
   więc pełnoekranowa nakładka menu przestałaby działać. Dlatego centrujemy
   marginesem, a menu mobilne rozwija się WEWNĄTRZ boxu. */
.mn-header{
  position: fixed;
  top: clamp(10px, 1.8vh, 22px);
  left: 0;
  right: 0;
  z-index: 50;
  width: min(var(--mn-max), calc(100% - 2 * var(--mn-gutter)));
  margin-inline: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(26,22,17,.28);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 16px 44px rgba(12,10,8,.30);
  transition: background .35s var(--mn-ease),
              border-radius .35s var(--mn-ease),
              box-shadow .35s var(--mn-ease),
              top .35s var(--mn-ease);
}
.mn-header__inner{
  position: relative;
  z-index: 51;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  max-width: none;
  margin: 0;
  padding: .5rem .6rem .5rem 1.25rem;
  transition: padding .35s var(--mn-ease);
}
/* Kolejność w boxie: logo i przycisk zawsze w górnej linii, menu pod nimi.
   W znaczniku <nav> stoi PRZED przyciskiem, a że rozwija się na pełną
   szerokość, bez `order` przycisk zamykania spadał pod listę linków. */
.mn-header__logo{ display: block; line-height: 0; order: 0; }
.mn-header__toggle{ order: 1; }
.mn-nav{ order: 2; }
.mn-header__logo img{
  display: block;
  width: 140px;
  height: auto;
  transition: width .35s var(--mn-ease);
}
/* Po zejściu z hero szkło gęstnieje — box unosi się nad jasnymi sekcjami */
.mn-header.is-stuck{
  background: rgba(20,17,13,.62);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 54px rgba(12,10,8,.40);
}

/* Hamburger */
.mn-header__toggle{
  position: relative;
  z-index: 51;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Różowy krążek na stałe, nie tylko po otwarciu — ten sam róż, co odznaki
     numerów w sekcji procesu, żeby akcent nie pojawiał się znikąd. */
  background: var(--mn-rose-dp);
  box-shadow: 0 6px 16px rgba(140,92,80,.35);
  cursor: pointer;
  transition: background .3s var(--mn-ease), transform .3s var(--mn-ease), box-shadow .3s var(--mn-ease);
}
.mn-header__toggle:hover{
  background: #BE8B7D;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(140,92,80,.45);
}
.mn-header__toggle:active{ transform: translateY(-1px); }
/* Kreski liczone względem ŚRODKOWEJ, nie względem przycisku. Wcześniej
   ::before/::after kotwiczyły się w przycisku (top 15 i 29 px przy środku
   na 21,5), przez co odstępy wychodziły 6,5 i 7,5 px — burger się rozjeżdżał.
   Grubość 2 px, nie 1 px: przy nieparzystej wysokości środkowa kreska lądowała
   na połówce piksela i rozmywała się na dwa rzędy, więc wyglądała grubiej niż
   zewnętrzne. Parzysta wysokość centruje się na całym pikselu. */
.mn-burger{
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: background .3s var(--mn-ease);
}
.mn-burger::before,
.mn-burger::after{
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform .3s var(--mn-ease);
}
.mn-burger::before{ top: -7px; }
.mn-burger::after{ top: 7px; }
.mn-header.is-open .mn-burger{ background: transparent; }
.mn-header.is-open .mn-burger::before{ transform: translateY(7px) rotate(45deg); }
.mn-header.is-open .mn-burger::after{ transform: translateY(-7px) rotate(-45deg); }
.mn-header__toggle:focus-visible{ outline: 2px solid var(--mn-gold-lt); outline-offset: 2px; }

/* Menu — na telefonie rozwija się w dół WEWNĄTRZ pływającego boxu,
   który przy okazji zmienia się z pigułki w zaokrągloną kartę. */
.mn-nav{
  flex-basis: 100%;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s2) .65rem var(--s2);
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: var(--s1);
}
.mn-header.is-open{ border-radius: 26px; }
.mn-header.is-open .mn-nav{ display: flex; animation: mn-nav-in .3s var(--mn-ease) both; }
@keyframes mn-nav-in{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: none; }
}
.mn-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.mn-nav__list a{
  font-family: var(--mn-display);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: color .25s var(--mn-ease);
}
.mn-nav__list a:hover{ color: var(--mn-gold-lt); }
/* Wygląd przycisku pochodzi ze wspólnego komponentu w sekcji 5 —
   tutaj tylko ustawienie w kolumnie menu. */
.mn-nav__cta{ align-self: flex-start; }
.mn-nav__list a:focus-visible{ outline: 2px solid var(--mn-gold-lt); outline-offset: 4px; }

/* Menu rozwija się wewnątrz boxu, więc strona pod spodem nie wymaga blokady. */

/* Desktop — menu wraca do jednego rzędu w boxie */
@media (min-width: 900px){
  /* Lewe wcięcie boxu = margines strony, więc logo ląduje dokładnie
     na tej samej osi co nagłówki sekcji (397 px przy 1920). */
  .mn-header__inner{
    flex-wrap: nowrap;
    padding: .5rem .6rem .5rem var(--mn-gutter);
  }
  .mn-header__logo img{ width: 210px; }
  .mn-header.is-stuck .mn-header__logo img{ width: 176px; }
  .mn-header__toggle{ display: none; }
  .mn-nav{
    flex-basis: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s5);
    margin-top: 0;
    padding: 0;
    border-top: 0;
    animation: none;
  }
  .mn-nav__list{ flex-direction: row; gap: var(--s5); }
  .mn-nav__list a{
    position: relative;
    font-family: var(--mn-sans);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
  }
  /* Podkreślenie wysuwane od lewej */
  .mn-nav__list a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: var(--mn-gold-lt);
    transition: width .3s var(--mn-ease);
  }
  .mn-nav__list a:hover::after{ width: 100%; }
  .mn-nav__cta{ align-self: auto; }
}

/* --- 6. SEKCJA 1 — HERO -------------------------------------------------- */
.elementor-element-a001001{
  background: var(--mn-night) !important;
  color: #fff;
}
/* Zdjęcie żyje we własnej warstwie (::after, z-index 0), żeby dało się je
   animować bez ruszania treści. Logo siedzi na ::before, treść na z-index 2. */
.elementor-element-a001001::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(12,11,9,.88) 0%, rgba(12,11,9,.54) 52%, rgba(12,11,9,.16) 100%),
    url('../../uploads/2026/09/hero-luxury-v2.jpg') center/cover;
  transform-origin: 60% 50%;
  animation: mn-kenburns 26s var(--mn-ease) both;
}
@keyframes mn-kenburns{
  from{ transform: scale(1.10); }
  to  { transform: scale(1);    }
}
/* Rytm hero oparty na skali 8 px: nagłówek → 40 px → lead → 24 px → dopisek
   → 48 px → przycisk. Górne wcięcie większe od dolnego, żeby blok treści
   siedział optycznie nad środkiem, a nie dokładnie w nim. */
.elementor-element-a001001{
  padding-top: clamp(7rem, 15vh, 11rem) !important;
  padding-bottom: clamp(5rem, 11vh, 8rem) !important;
}
/* Elementor dokłada 20 px pod każdy widget — zerujemy, żeby o odstępach
   decydowała wyłącznie skala powyżej. */
.elementor-element-a001001 .elementor-widget{ margin-bottom: 0 !important; }
.elementor-element-a001001 h1{
  color: #fff !important;
  max-width: 13ch;
  margin-bottom: 0;
}
.elementor-element-a001001 .elementor-widget-text-editor{
  max-width: 42ch;
  margin-top: 2.5rem;
}
/* Lead i dopisek prawny to dwa <p> w jednym widgecie — stąd rozdział po pozycji. */
.elementor-element-a001001 .elementor-widget-text-editor p{ margin: 0; }
.elementor-element-a001001 .elementor-widget-text-editor p:first-child{
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(255,255,255,.92) !important;
}
.elementor-element-a001001 .elementor-widget-text-editor p:last-child{
  margin-top: var(--s3);
  padding-left: .875rem;
  border-left: 1px solid rgba(227,199,143,.55);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .03em;
  color: rgba(255,255,255,.78) !important;
}
.elementor-element-a001001 .elementor-widget-button{ margin-top: var(--s6); }

/* Wejście etapami — logo, nagłówek, lead, przycisk, ikony.
   Nadpisuje mn-luxury-reveal z miniatures-luxury.css (całość naraz). */
.elementor-element-a001001 .elementor-widget-wrap{ animation: none; }
.elementor-element-a001001 .elementor-widget{
  opacity: 1;
  animation: mn-hero-in 1.1s var(--mn-ease) both;
}
/* Nagłówek odsłania się kurtyną od dołu — czytelniejszy gest niż samo fade */
.elementor-element-a001001 .elementor-widget:nth-child(1){
  animation: mn-hero-curtain 1.35s var(--mn-ease) .25s both;
}
.elementor-element-a001001 .elementor-widget:nth-child(2){ animation-delay: .70s; }
.elementor-element-a001001 .elementor-widget:nth-child(3){ animation-delay: .88s; }
.elementor-element-a001001 .elementor-widget:nth-child(4){ animation-delay: 1.06s; }
@keyframes mn-hero-in{
  from{ opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to  { opacity: 1; transform: none;             filter: none; }
}
/* Klatka końcowa MUSI mieć ujemne wcięcia. Przy `inset(0 0 0 0)` clip-path
   zostaje na elemencie po animacji i przycina go do krawędzi pudełka —
   a zejścia liter (ogonek „ę”, ogon „y”) sięgają ok. 7 px niżej i były
   ścinane. Ujemne wartości rozszerzają obszar przycięcia poza pudełko. */
@keyframes mn-hero-curtain{
  from{
    opacity: 0;
    clip-path: inset(0 -5% 100% -5%);
    transform: translateY(42px) scale(.985);
    filter: blur(10px);
  }
  to{
    opacity: 1;
    clip-path: inset(0 -5% -30% -5%);
    transform: none;
    filter: none;
  }
}

/* Dolny margines rezerwuje miejsce na wskaźnik i pasek ikon */
.elementor-element-a001001{ padding-bottom: clamp(5rem, 11vh, 8rem) !important; }

/* Wskaźnik przewijania — cienka kreska na osi treści, pulsuje w dół */
.elementor-element-a001001 > .elementor-container::after{
  content: '';
  position: absolute;
  left: var(--mn-gutter);
  top: calc(100% + 14px);
  width: 1px;
  height: 44px;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: mn-cue 2.4s var(--mn-ease) 1.6s infinite;
}
@keyframes mn-cue{
  0%   { transform: translateY(-10px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(14px);  opacity: 0; }
}

/* Ikony społecznościowe — pasek u dołu, wyrównany do prawej krawędzi osi treści.
   Wcześniej wisiały w pionie na środku prawej krawędzi okna: bez związku
   z siatką i w kolizji ze zdjęciem produktu.
   Widget-rodzic musi być static, inaczej kotwiczy je u siebie. */
.elementor-element-a001001 .elementor-element-b0c1a22{ position: static !important; }
.elementor-element-a001001 .miniatures-socials{
  position: absolute;
  top: calc(100% + 22px);
  bottom: auto;
  /* 0 = prawa krawędź kolumny treści; --mn-gutter cofałby je o kolejne 64 px
     do środka kadru, przez co wisiały bez związku z siatką. */
  right: 0;
  left: auto;
  transform: none;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
}
/* Kreska prowadząca do ikon — domyka kompozycję po prawej */
.elementor-element-a001001 .miniatures-socials::before{
  content: '';
  width: clamp(32px, 7vw, 88px);
  height: 1px;
  background: rgba(255,255,255,.3);
  margin-right: var(--s1);
}
/* Zdejmuje kółka — !important bije social-icons.css */
.elementor-element-a001001 .miniatures-socials a,
.elementor-element-a001001 .miniatures-socials .miniatures-social__item--pending{
  display: grid !important;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.7);
  transition: color .25s var(--mn-ease), transform .25s var(--mn-ease);
}
.elementor-element-a001001 .miniatures-socials svg{
  width: 19px !important;
  height: 19px !important;
}
.elementor-element-a001001 .miniatures-socials a:hover{
  color: var(--mn-gold-lt);
  transform: translateY(-3px);
}
.elementor-element-a001001 .miniatures-socials a:focus-visible{
  outline: 2px solid var(--mn-gold-lt);
  outline-offset: 6px;
}

/* --- 7. SEKCJA 2 — PROCES ------------------------------------------------ */
/* Świt — róż jest sygnaturą tej jednej sekcji; światło w lewym górnym rogu */
.elementor-element-process01{
  background:
    radial-gradient(ellipse 78% 62% at 8% 2%, rgba(206,155,142,.55) 0, transparent 64%),
    radial-gradient(ellipse 62% 55% at 96% 98%, rgba(176,141,87,.26) 0, transparent 62%),
    linear-gradient(166deg, #F3DED6 0%, var(--mn-bg-swit) 46%, var(--mn-bg-dzien) 100%) !important;
  color: var(--mn-ink);
}
.elementor-element-process01 h2,
.elementor-element-process01 .elementor-widget-text-editor{ color: var(--mn-ink) !important; }
.elementor-element-process01 h2::before{ content: 'Jak pracujemy'; }

/* Kroki jako karty z odznaką numeru wychodzącą ponad górną krawędź.
   Wcześniej były to trzy luźne kolumny rozdzielone kreską — bez ciężaru. */
.elementor-element-process01 .elementor-widget-text-editor{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  max-width: none;
  margin-top: var(--s6);
  padding-top: 0;
  border-top: 0;
}
/* Nić spinająca odznaki usunięta — biegła ZA kartami, więc czytała się jako
   przypadkowe kreski w przerwach między nimi. Numerację niosą same odznaki. */
.elementor-element-process01 .elementor-widget-text-editor::before{ display: none !important; }
.elementor-element-process01 .elementor-widget-text-editor p{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 14rem;
  margin: 0;
  padding: var(--s4);
  background: #fff !important;
  border: 1px solid rgba(168,119,106,.34) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(140,92,80,.16) !important;
  color: var(--mn-ink-2);
  font-size: 1rem;
  line-height: 1.7;
  transition: transform .35s var(--mn-ease),
              box-shadow .35s var(--mn-ease),
              border-color .35s var(--mn-ease);
}
.elementor-element-process01 .elementor-widget-text-editor p:hover{
  transform: translateY(-6px);
  border-color: var(--mn-gold) !important;
  box-shadow: 0 26px 52px rgba(150,105,95,.18) !important;
}
/* Odznaka numeru — w przepływie karty, nad tytułem kroku.
   `align-self` i `flex: none` są konieczne: w kolumnie flex krążek inaczej
   rozciągnąłby się na całą szerokość karty i przestał być kołem. */
.elementor-element-process01 .elementor-widget-text-editor p::before{
  position: static;
  display: grid;
  place-items: center;
  align-self: flex-start;
  flex: none;
  width: 54px;
  height: 54px;
  margin-bottom: var(--s3);
  border-radius: 50%;
  background: var(--mn-rose-dp);
  box-shadow: 0 10px 22px rgba(140,92,80,.26);
  font-family: var(--mn-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
/* process-editorial.css narzuca `p + p { border-left: … !important }` z czasów
   układu kolumnowego. Musimy je nadpisać, żeby druga i trzecia karta miały
   dokładnie taką samą ramkę jak pierwsza. */
.elementor-element-process01 .elementor-widget-text-editor p + p{
  padding-left: var(--s4);
  border-left: 1px solid rgba(168,119,106,.34) !important;
}
.elementor-element-process01 .elementor-widget-text-editor p:nth-child(1)::before{ content: '01'; }
.elementor-element-process01 .elementor-widget-text-editor p:nth-child(2)::before{ content: '02'; }
.elementor-element-process01 .elementor-widget-text-editor p:nth-child(3)::before{ content: '03'; }

.elementor-element-process01 .elementor-widget-text-editor strong{
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--mn-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--mn-ink);
}
/* Nadkreślenie sekcji przejmuje róż, nie złoto */
.elementor-element-process01 h2::before{ color: var(--mn-rose-dp); }

/* --- 8. SEKCJA 3 — KAMIENIE I INSPIRACJE --------------------------------- */
/* Dzień — najjaśniejszy punkt strony; światło schodzi w prawy dolny róg */
.elementor-element-stones01{
  background:
    radial-gradient(ellipse 66% 58% at 92% 90%, rgba(176,141,87,.20) 0, transparent 62%),
    linear-gradient(200deg, var(--mn-bg-dzien) 0%, var(--mn-bg-mgla) 100%) !important;
  /* stretch zamiast center — inaczej 1fr galerii nie ma czego wypełnić */
  align-items: stretch;
}
.elementor-element-stones01 > .elementor-container{ display: flex; align-items: stretch; }
.elementor-element-stones01 > .elementor-container > .elementor-column{ display: flex; }
.elementor-element-stones01 .elementor-widget{ margin-bottom: 0 !important; }
.elementor-element-stones01 h2{ margin-bottom: var(--s2); }
.elementor-element-stones01 h2::before{ content: 'Materia, kolor, znak'; }
.elementor-element-stones01 .elementor-widget-text-editor{
  max-width: var(--mn-measure-body);
  margin-bottom: var(--s2);
}

/* Układ: kolumna tekstu po lewej, mozaika zdjęć po prawej.
   Wcześniej był to rząd trzech kwadratów pod nagłówkiem na całą szerokość. */
.elementor-element-stones01 .elementor-widget-wrap{
  display: grid !important;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  /* Dwa równe wiersze: nagłówek dosuwany do dołu pierwszego, tekst do góry
     drugiego — para spotyka się w pionowym środku obok galerii. Przy `auto 1fr`
     cała nadwyżka szła w dolny wiersz i tekst lądował pod sufitem. */
  grid-template-rows: 1fr 1fr;
  column-gap: var(--s7);
  row-gap: var(--s3);
  flex: 1;
  height: auto;
  min-height: 0;
  align-content: center;
}
.elementor-element-stones01 .elementor-widget-heading{ grid-column: 1; grid-row: 1; align-self: end; }
.elementor-element-stones01 .elementor-widget-text-editor{ grid-column: 1; grid-row: 2; align-self: start; }
/* Celujemy w identyfikatory widgetów, nie w :nth-of-type — ten liczy WSZYSTKIE
   sąsiadujące <div>-y (nagłówek, tekst), więc nigdy nie trafiał w obrazki. */
.elementor-element-stones01 .elementor-element-aiimg8,
.elementor-element-stones01 .elementor-element-aiimg9{ display: none !important; }
.elementor-element-stones01 .elementor-element-aiimg10{
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  min-height: 0;
  box-shadow: none !important;
  background: none !important;
}
.elementor-element-stones01 .elementor-widget-image .elementor-widget-container{ height: 100%; }
.elementor-element-stones01 .elementor-widget-image::after{ display: none !important; }
.elementor-element-stones01 .elementor-widget-wrap::after{ content: none !important; }

/* Mozaika 3×2: kadr wiodący na pełną wysokość po lewej, cztery mniejsze obok */
.mn-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--s2);
  height: 100%;
  min-height: 0;
}
.mn-gallery__item{
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mn-mist);
}
.mn-gallery__item--tall{ grid-row: 1 / span 2; }
.mn-gallery__item img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform .7s var(--mn-ease);
}
.mn-gallery__item:hover img{ transform: scale(1.06); }
/* Podpis wjeżdża od dołu dopiero przy najechaniu */
.mn-gallery__item figcaption{
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(23,20,15,.82));
  color: #fff;
  font-family: var(--mn-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--mn-ease), transform .3s var(--mn-ease);
}
.mn-gallery__item:hover figcaption,
.mn-gallery__item:focus-within figcaption{ opacity: 1; transform: none; }
.mn-gallery__note{
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--s1);
  font-family: var(--mn-sans);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
  /* --mn-ink-3 dawał 4,12 przy 11 px — poniżej progu AA */
  color: var(--mn-ink-2);
}

/* --- 9. SEKCJA 4 — FORMULARZ --------------------------------------------- */
/* Ciemna sekcja ze zdjęciem pod spodem. Matowe szkło potrzebuje czegoś, co
   rozmyje — nad płaską plamą koloru backdrop-filter nie robi nic widocznego. */
/* Zmierzch — jaśniejszy od nocy hero, żeby oba ciemne ekrany się różniły */
.elementor-element-form001{
  background: var(--mn-bg-zmierzch) !important;
  color: #fff;
}
/* Dwie osobne warstwy zamiast jednej.
   Wcześniej zdjęcie i przyciemnienie siedziały w jednym tle: żeby kamienie
   nie przejmowały uwagi, musiałem zdusić je do 3% widoczności — i przestawały
   czytać się jako zdjęcie, a zaczynały jako brudna plama.
   Teraz ::before to mocno rozmyty lapis (czytelny jako miękki bokeh, nie jako
   fotografia), a ::after to ciepła ciemna zasłona nad nim. Szkło formularza ma
   wreszcie realną głębię do rozmycia. */
/* UWAGA na specyficzność: miniatures-prototype.css ma
   `.elementor-section:not(:first-child):before` (0,3,0) — stary złoty myślnik
   44×2 px. Przy selektorze (0,1,1) przechodziło tylko `content`, a reszta
   zostawała z tamtej reguły: rozmywałem kreskę zamiast zdjęcia.
   Stąd `!important` na każdej własności, która się z nią zderza. */
.elementor-section.elementor-element-form001::before{
  content: '' !important;
  position: absolute !important;
  /* Ujemny inset chowa rozmyte krawędzie poza kadrem sekcji */
  top: -80px !important;
  right: -80px !important;
  bottom: -80px !important;
  left: -80px !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  background: url('../../uploads/2026/09/mn-lapis.jpg') center/cover !important;
  /* brightness konieczne: lapis to ciemne kamienie, a rozmycie uśrednia je
     do granatowej czerni, która ginie pod zasłoną.
     saturate poniżej 100% i sepia ściągają błękit w stronę ciepła — przy
     pełnym nasyceniu sekcja robiła się niebiesko-fioletowa i wypadała
     z ciepłej palety reszty strony. */
  filter: blur(52px) brightness(1.7) saturate(50%) sepia(28%) !important;
  opacity: .8 !important;
}
.elementor-element-form001::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Zasłona gęstsza po lewej, gdzie leży tekst na wprost tła, a rzadsza
     w środku i po prawej — tam bokeh ma pracować pod szkłem formularza. */
  /* Zasłona w ciepłej czerni (odcień brązu, nie neutralnej sadzy) — dociąga
     rozmyty lapis do palety marki. Gęstsza po lewej, gdzie tekst leży wprost
     na tle; rzadsza w środku i po prawej, gdzie bokeh pracuje pod szkłem. */
  background:
    linear-gradient(105deg, rgba(20,14,9,.95) 0%, rgba(20,14,9,.87) 28%, rgba(20,14,9,.62) 62%, rgba(20,14,9,.82) 100%),
    radial-gradient(ellipse 66% 60% at 82% 6%, rgba(176,141,87,.34) 0, transparent 64%);
}
.elementor-element-form001 > .elementor-container{ position: relative; z-index: 2; }
.elementor-element-form001 h2{ color: #fff !important; }
.elementor-element-form001 .elementor-widget-text-editor{ color: rgba(255,255,255,.78) !important; }
/* Telefon i e-mail są linkami — bez tego zostają w ciemnym kolorze Elementora
   i na przyciemnionym tle stają się nieczytelne. */
.elementor-element-form001 .elementor-widget-text-editor a{
  color: #fff !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(227,199,143,.5);
  transition: color .25s var(--mn-ease), border-color .25s var(--mn-ease);
}
.elementor-element-form001 .elementor-widget-text-editor a:hover{
  color: var(--mn-gold-lt) !important;
  border-color: var(--mn-gold-lt);
}
.elementor-element-form001 h2::before{ content: 'Zapytanie'; color: var(--mn-gold-lt); }
/* Nagłówek schodzi o stopień w skali — inaczej sekcja nie zmieści się w ekranie */
.elementor-element-form001 h2{
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
  margin-bottom: var(--s2);
}
/* Treść tej sekcji wypełnia ją niemal w całości, więc wyśrodkowanie nie
   spycha jej spod pływającego headera — górne wcięcie musi zrobić to samo. */
.elementor-element-form001{
  padding-top: clamp(6rem, 12vh, 7.5rem) !important;
  padding-bottom: clamp(.75rem, 1.5vh, 1.25rem) !important;
  /* ZABEZPIECZENIE: to jedyna sekcja, w której treść ledwo mieści się w ekranie.
     Przy `overflow: hidden` na niższych ekranach (1440×780, 1366×700) dolne
     pola i przycisk wysyłki były po prostu OBCINANE — formularz stawał się
     nie do wypełnienia. Lepiej, żeby sekcja urosła o kilka pikseli ponad
     100vh, niż żeby ucięła treść. Warstwa tła to `inset: 0`, więc rośnie
     razem z sekcją i nie wymaga przycinania. */
  overflow: visible;
}
.elementor-element-form001 .elementor-widget{ margin-bottom: 0 !important; }

/* Nagłówek po lewej, formularz po prawej — mieści się w jednym ekranie */
.elementor-element-form001 .elementor-widget-wrap{
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--s7);
  align-items: start;
  max-width: none !important;
}
.elementor-element-form001 .elementor-widget-heading,
.elementor-element-form001 .elementor-widget-text-editor{ grid-column: 1; }
.elementor-element-form001 .elementor-widget-html,
.elementor-element-form001 .elementor-widget-shortcode{ grid-column: 2; grid-row: 1 / span 4; }

.elementor-element-form001 .elementor-widget-text-editor{
  border-left: 1px solid var(--mn-gold-lt);
  padding-left: var(--s3);
  margin-block: var(--s2) !important;
  max-width: 42ch;
  font-size: .9375rem;
}

/* --- 10. FORMULARZ — KOMPONENT ------------------------------------------- */
.miniatures-form{
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  padding: clamp(1.25rem, 1.8vw, 1.65rem);
  box-shadow: 0 30px 70px rgba(8,6,4,.45);
  max-width: none;
  color: #fff;
}
.miniatures-form fieldset{ border: 0; padding: 0; margin: 0; }
.miniatures-form fieldset[hidden],
.miniatures-form [hidden]{ display: none !important; }

.miniatures-form legend{
  font-family: var(--mn-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: var(--s2);
  padding: 0;
}

/* Stepper — usuwa podwójną numerację „1. 1. Projekt” */
.miniatures-form ol,
.miniatures-form ul{
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  padding: 0 0 var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
/* Trzy stany kroku: przebyty, bieżący, jeszcze przed nami. */
.miniatures-form li{ transition: color .25s var(--mn-ease); }
.miniatures-form li.is-done{ color: rgba(255,255,255,.78); }
.miniatures-form li[aria-current="step"]{ color: var(--mn-gold-lt); }
.miniatures-form ol li::marker,
.miniatures-form ul li::marker{ content: none; }

/* Pola — komórką siatki jest CAŁE pole (.mn-field), nie osobno etykieta
   i kontrolka. Wcześniej siatka rozrywała je do dwóch różnych kolumn. */
.miniatures-form fieldset:not([hidden]){
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s3);
  row-gap: var(--s3);
}
.miniatures-form legend,
.miniatures-form ol,
.miniatures-form ul,
.miniatures-form .mn-field--wide,
.miniatures-form .miniatures-form__actions{ grid-column: 1 / -1; }

.mn-field{ display: flex; flex-direction: column; min-width: 0; }

/* Etykiety jako drobna kapitalikowa mikrotypografia — ten sam rejestr,
   co nadkreślenia sekcji i nawigacja. */
.miniatures-form label{
  display: block;
  margin-bottom: .4rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255,255,255,.72);
}
.miniatures-form label small{
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(255,255,255,.45);
}
.miniatures-form input,
.miniatures-form select,
.miniatures-form textarea{
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: .58rem .8rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  /* background-color, nie skrót — skrót kasowałby strzałkę listy poniżej */
  background-color: rgba(255,255,255,.06);
  font-family: var(--mn-sans);
  font-size: .9375rem;
  font-weight: 300;
  color: #fff;
  transition: border-color .25s var(--mn-ease), background-color .25s var(--mn-ease);
}
/* Lista rozwijana rysowała jeszcze własną, systemową ramkę — stąd podwójny
   obrys. Wyłączamy natywny wygląd i dokładamy własną strzałkę. */
.miniatures-form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' stroke='%23E3C78F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 12px 8px;
}
.miniatures-form select::-ms-expand{ display: none; }
/* Lista rozwijana rysuje opcje systemowo — muszą być czytelne na jasnym tle */
.miniatures-form select option{ background: var(--mn-night); color: #fff; }
.miniatures-form ::placeholder{ color: rgba(255,255,255,.4); }
.miniatures-form input:hover,
.miniatures-form select:hover,
.miniatures-form textarea:hover{
  border-color: rgba(255,255,255,.34);
  background-color: rgba(255,255,255,.09);
}
/* JEDNA ramka, nie trzy pierścienie. Wcześniej nakładały się na siebie:
   własna ramka + obrys z odstępem + poświata. Teraz ramka po prostu
   grubieje na złoto — box-shadow 1 px dokłada się wprost do krawędzi. */
.miniatures-form input:focus,
.miniatures-form select:focus,
.miniatures-form textarea:focus{
  outline: none;
  border-color: var(--mn-gold-lt);
  background-color: rgba(255,255,255,.11);
  box-shadow: 0 0 0 1px var(--mn-gold-lt);
}
.miniatures-form textarea{ min-height: 58px; resize: vertical; }

.miniatures-form__note{
  margin-top: var(--s1);
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
}
.miniatures-form__consent{
  display: flex !important;
  gap: .65rem;
  align-items: flex-start;
  margin-bottom: 0 !important;
  font-weight: 300 !important;
  font-size: .8125rem;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}
.miniatures-form__consent input{
  width: auto;
  margin: .18rem 0 0;
  flex: none;
  accent-color: var(--mn-gold);
}
.miniatures-form__trap{ position: absolute !important; left: -10000px !important; }

.miniatures-form__actions{
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}
/* Wygląd przycisków pochodzi ze wspólnego komponentu w sekcji 5. */
.miniatures-form button[disabled]{ opacity: .5; cursor: wait; transform: none; }
/* „Wstecz” to jedyny wariant drugorzędny — ta sama geometria, krój, kreska
   i ruch przy najechaniu, tylko obrys zamiast wypełnienia. Dwa identyczne
   złote przyciski obok siebie znosiłyby hierarchię „wróć / dalej”. */
.miniatures-form .miniatures-form__back{
  background: transparent !important;
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
  box-shadow: none;
}
.miniatures-form .miniatures-form__back:hover{
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
  box-shadow: none;
}
.miniatures-form__status{ min-height: 1.5em; margin-bottom: var(--s1); color: #F0A9A0; font-size: .875rem; }
.miniatures-form__success{
  grid-column: 1 / -1;
  padding: var(--s3);
  border-left: 2px solid var(--mn-gold-lt);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  line-height: 1.7;
}

/* --- 11. SEKCJA 5 — FAQ -------------------------------------------------- */
/* Mgła — sekcja przeniesiona z ciemnego na jasne. To ona rozbija ciąg trzech
   ciemnych ekranów na końcu strony; światło schodzi w lewy dolny róg. */
.elementor-element-faq0001{
  min-height: 100svh !important;
  background:
    radial-gradient(ellipse 64% 56% at 10% 92%, rgba(176,141,87,.22) 0, transparent 62%),
    linear-gradient(160deg, var(--mn-bg-mgla) 0%, var(--mn-bg-dzien) 100%) !important;
  color: var(--mn-ink);
}
.elementor-element-faq0001 h2{ color: var(--mn-ink) !important; }
.elementor-element-faq0001 .elementor-widget-text-editor,
.elementor-element-faq0001 .elementor-widget-text-editor a{ color: var(--mn-ink-2) !important; }
.elementor-element-faq0001 h2::before{ content: 'Zanim zapytasz'; color: var(--mn-gold-txt); }
/* Dwie kolumny: nagłówek po lewej, pytania po prawej — ten sam podział,
   co w sekcji „Kamienie i inspiracje”, żeby układ czytał się jako system. */
.elementor-element-faq0001 .elementor-widget-wrap{
  display: grid !important;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  grid-template-rows: 1fr 1fr;
  column-gap: var(--s7);
  row-gap: var(--s3);
  align-content: center;
}
/* Obie kolumny startują od tej samej linii — układ czyta się jako rozkładówka,
   a nie jako dwa niezależne bloki. */
.elementor-element-faq0001 .elementor-widget-heading{ grid-column: 1; grid-row: 1; align-self: start; }
.elementor-element-faq0001 .elementor-widget-text-editor{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  max-width: none;
}
.elementor-element-faq0001 .elementor-widget-text-editor p{
  margin: 0;
  padding: var(--s3) 0;
  line-height: 1.65;
  border-bottom: 1px solid var(--mn-line);
  transition: padding-left .25s var(--mn-ease), border-color .25s var(--mn-ease);
}
/* Pytanie jest blokiem, a po nim stoi jeszcze <br> — razem dawały pusty
   wiersz między pytaniem a odpowiedzią. */
.elementor-element-faq0001 .elementor-widget-text-editor p br{ display: none; }
.elementor-element-faq0001 .elementor-widget-text-editor p:hover{
  padding-left: var(--s2);
  border-color: var(--mn-gold);
}
.elementor-element-faq0001 .elementor-widget-text-editor strong{
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--mn-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mn-gold-txt) !important;
}

/* --- 11b. SEKCJA ZAMYKAJĄCA (stopka + newsletter) ------------------------- */
.elementor-element-faq0001{ padding-bottom: clamp(2.5rem, 6vh, 5rem) !important; }

/* Noc — najgłębszy punkt strony, domknięcie klamry z hero. Światło zbiera się
   w środku, za logo, zamiast siedzieć w rogu jak w pozostałych sekcjach. */
.mn-closing{
  background:
    radial-gradient(ellipse 58% 52% at 34% 42%, rgba(176,141,87,.20) 0, transparent 64%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(0,0,0,.5) 0, transparent 70%),
    var(--mn-bg-noc) !important;
  color: #fff;
}
/* stretch zamiast center — inaczej kontener ma wysokość własnej treści,
   a `space-between` nie ma czego rozsuwać i pasek prawny wisi w połowie.
   Selektor dwuklasowy (0,2,0), bo przy samym `.mn-closing` remisował
   z `.elementor-section { align-items: center }`. */
.elementor-section.mn-closing{ align-items: stretch; }
.mn-closing > .elementor-container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
}
.mn-closing__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-content: center;
  flex: 1;
}
.mn-closing__logo{
  display: block;
  width: clamp(200px, 26vw, 320px);
  height: auto;
}
.mn-closing__claim{
  margin: var(--s3) 0 0;
  max-width: 30ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(255,255,255,.66);
}

/* Newsletter */
/* Specyficzność 0,2,0 — musi pobić globalne `.elementor-section h2` (0,1,1),
   inaczej nagłówek newslettera dziedziczy skalę nagłówka sekcji i łamie się
   na trzy wiersze. Z tego samego powodu znosimy max-width w znakach. */
.mn-closing .mn-newsletter__title{
  font-family: var(--mn-display) !important;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important;
  font-weight: 300 !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em;
  max-width: none;
  margin: 0 0 var(--s2);
  color: #fff !important;
}
.mn-closing .mn-newsletter__title::before{ content: none !important; }
.mn-newsletter__lead{
  margin: 0 0 var(--s3);
  max-width: 38ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: rgba(255,255,255,.66);
}
.mn-newsletter__trap{ position: absolute !important; left: -10000px !important; }
.mn-newsletter__row{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--s2);
  max-width: 34rem;
}
.mn-newsletter button{ flex: none; }
.mn-newsletter input[type="email"]{
  flex: 1 1 14rem;
  min-width: 0;
  box-sizing: border-box;
  padding: .58rem .95rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--mn-radius);
  background-color: rgba(255,255,255,.06);
  font-family: var(--mn-sans);
  font-size: .9375rem;
  font-weight: 300;
  color: #fff;
  transition: border-color .25s var(--mn-ease), background-color .25s var(--mn-ease);
}
.mn-newsletter input[type="email"]::placeholder{ color: rgba(255,255,255,.4); }
.mn-newsletter input[type="email"]:hover{ border-color: rgba(255,255,255,.34); background-color: rgba(255,255,255,.09); }
.mn-newsletter input[type="email"]:focus{
  outline: none;
  border-color: var(--mn-gold-lt);
  background-color: rgba(255,255,255,.11);
  box-shadow: 0 0 0 1px var(--mn-gold-lt);
}
.mn-newsletter__consent{
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-top: var(--s3);
  max-width: 44ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(255,255,255,.66);
}
.mn-newsletter__consent input{ margin: .2rem 0 0; flex: none; accent-color: var(--mn-gold); }
.mn-newsletter__status{ min-height: 1.4em; margin: var(--s2) 0 0; font-size: .875rem; color: rgba(255,255,255,.7); }
.mn-newsletter__status.is-error{ color: #F0A9A0; }
.mn-newsletter__done{
  margin: 0;
  padding: var(--s3);
  border-left: 2px solid var(--mn-gold-lt);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  line-height: 1.7;
}

/* Kontakt */
.mn-closing__label{
  display: block;
  margin-bottom: var(--s2);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mn-gold-lt);
}
.mn-closing__contact{ display: flex; flex-direction: column; gap: var(--s1); }
.mn-closing__contact a{
  color: #fff;
  font-size: .9375rem;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .25s var(--mn-ease);
}
.mn-closing__contact a:hover{ color: var(--mn-gold-lt); }
.mn-closing__contact a:focus-visible{ outline: 2px solid var(--mn-gold-lt); outline-offset: 3px; }
/* Ikony wracają do przepływu — wariant z hero jest pozycjonowany.
   `display:flex` musi być tutaj: w social-hero.css jest ograniczone do hero,
   więc poza nią <nav> wracał do bloku i ikony się piętrzyły. */
.mn-closing .miniatures-socials{
  position: static;
  display: flex;
  transform: none;
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.mn-closing .miniatures-socials::before{ display: none; }
.mn-closing .miniatures-socials a,
.mn-closing .miniatures-socials .miniatures-social__item--pending{
  display: grid !important;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.7);
  transition: color .25s var(--mn-ease), transform .25s var(--mn-ease);
}
.mn-closing .miniatures-socials svg{ width: 19px !important; height: 19px !important; }
.mn-closing .miniatures-socials a:hover{ color: var(--mn-gold-lt); transform: translateY(-3px); }

/* Pasek prawny */
.mn-closing__legal{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}
.mn-closing__links{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.mn-closing__links a{
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .25s var(--mn-ease);
}
.mn-closing__links a:hover{ color: var(--mn-gold-lt); }
.mn-closing__links a:focus-visible{ outline: 2px solid var(--mn-gold-lt); outline-offset: 3px; }

/* Wejście sekcji — nie ma tu widgetów Elementora, więc własna reguła */
.mn-js .mn-closing:not(.is-revealed) .mn-closing__inner,
.mn-js .mn-closing:not(.is-revealed) .mn-closing__legal{ opacity: 0; }
.mn-closing.is-revealed .mn-closing__inner,
.mn-closing.is-revealed .mn-closing__legal{
  opacity: 1;
  animation: mn-reveal .95s var(--mn-ease) both;
}
.mn-closing.is-revealed .mn-closing__legal{ animation-delay: .18s; }

@media (min-width: 900px){
  .mn-closing__inner{
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    gap: var(--s6);
    align-items: start;
  }
}

/* --- 12. WEJŚCIE SEKCJI -------------------------------------------------- */
/* Ukrywamy WYŁĄCZNIE gdy JS działa (klasa mn-js) — bez skryptu strona
   pozostaje w pełni czytelna. Hero ma własną sekwencję, więc go pomijamy. */
.mn-js .elementor-section:not(.is-revealed):not(.elementor-element-a001001) .elementor-widget{
  opacity: 0;
}
/* Jawne opacity:1 po odsłonięciu. Gdyby animacja nie wystartowała — a tak się
   dzieje np. w karcie w tle, gdzie przeglądarka je zamraża — treść i tak jest
   widoczna. Poleganie na `animation-fill-mode: both` zostawiało pustą sekcję. */
.elementor-section.is-revealed:not(.elementor-element-a001001) .elementor-widget{
  opacity: 1;
  animation: mn-reveal .95s var(--mn-ease) both;
}
/* Nagłówek każdej sekcji dostaje ten sam kurtynowy gest co hero */
.elementor-section.is-revealed:not(.elementor-element-a001001) .elementor-widget-heading{
  animation: mn-reveal-curtain 1.15s var(--mn-ease) both;
}
.elementor-section.is-revealed .elementor-widget:nth-child(2){ animation-delay: .14s; }
.elementor-section.is-revealed .elementor-widget:nth-child(3){ animation-delay: .26s; }
.elementor-section.is-revealed .elementor-widget:nth-child(4){ animation-delay: .38s; }
.elementor-section.is-revealed .elementor-widget:nth-child(5){ animation-delay: .50s; }
@keyframes mn-reveal{
  from{ opacity: 0; transform: translateY(28px); filter: blur(5px); }
  to  { opacity: 1; transform: none;             filter: none; }
}
/* Ujemne wcięcia w klatce końcowej — patrz uwaga przy mn-hero-curtain. */
@keyframes mn-reveal-curtain{
  from{ opacity: 0; clip-path: inset(0 -5% 100% -5%); transform: translateY(34px); }
  to  { opacity: 1; clip-path: inset(0 -5% -30% -5%); transform: none; }
}

/* --- 12b. NISKIE EKRANY --------------------------------------------------- */
/* Laptopy 13–14" mają ok. 700–800 px wysokości okna. Formularz zagęszczamy,
   żeby nadal mieścił się w jednym ekranie — bez tego rósłby ponad 100vh
   i psuł rytm scroll-snapa (choć dzięki `overflow: visible` nic nie ginie). */
@media (min-width: 900px) and (max-height: 860px){
  .elementor-element-form001 h2{ font-size: 2rem !important; }
  .elementor-element-form001 .elementor-widget-text-editor{ font-size: .875rem; }
  .miniatures-form{ padding: 1.15rem; }
  .miniatures-form legend{ font-size: 1.3rem; margin-bottom: var(--s2); }
  .miniatures-form ol,
  .miniatures-form ul{ margin-bottom: var(--s2); padding-bottom: var(--s2); }
  .miniatures-form fieldset:not([hidden]){ row-gap: var(--s2); }
  .miniatures-form label{ margin-bottom: .3rem; }
  .miniatures-form input,
  .miniatures-form select,
  .miniatures-form textarea{ padding: .48rem .75rem; font-size: .875rem; }
  .miniatures-form textarea{ min-height: 46px; }
  .miniatures-form__actions{ margin-top: var(--s2); }
  .elementor-section .elementor-button,
  .mn-nav__cta,
  .miniatures-form button,
  .mn-newsletter button{ padding: .95em 2.1em !important; }
}

/* --- 13. TABLET ---------------------------------------------------------- */
@media (max-width: 1024px){
  .elementor-element-form001 .elementor-widget-wrap{
    grid-template-columns: 1fr;
    row-gap: var(--s4);
  }
  .elementor-element-form001 .elementor-widget-html,
  .elementor-element-form001 .elementor-widget-shortcode{ grid-column: 1; grid-row: auto; }
  .elementor-element-a001001 .miniatures-socials{ right: var(--mn-gutter); }
}

/* --- 14. MOBILE ---------------------------------------------------------- */
@media (max-width: 767px){
  :root{ --mn-measure-body: 100%; --mn-measure-lead: 100%; }

  /* Na telefonie treść ma prawo urosnąć ponad ekran — nic nie ucinamy. */
  .elementor-section{
    min-height: 100svh !important;
    height: auto !important;
    padding-block: var(--s6) !important;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  html{ scroll-snap-type: none; }

  .elementor-section h1{ font-size: clamp(2.75rem, 12vw, 4rem) !important; max-width: 100%; }
  .elementor-section h2{ font-size: clamp(2.25rem, 10vw, 3rem) !important; max-width: 100%; }

  /* Ciaśniejszy przycisk — na 390 px etykieta CTA łamała się na dwie linie.
     Zwężenie dotyczy wszystkich trzech miejsc, żeby pozostały identyczne. */
  .elementor-section .elementor-button,
  .mn-nav__cta,
  .miniatures-form button{
    padding: 1.15em 1.8em !important;
    font-size: .75rem !important;
    letter-spacing: .1em;
    gap: .7em;
  }
  .elementor-section .elementor-button::after,
  .mn-nav__cta::after,
  .miniatures-form button::after{ width: 14px; }

  /* Proces — karty jedna pod drugą, odznaka po lewej wewnątrz karty.
     Wystająca odznaka i nić spinająca działają tylko w układzie poziomym. */
  .elementor-element-process01 h2{ margin-bottom: var(--s2); }
  .elementor-element-process01 .elementor-widget-text-editor{
    grid-template-columns: 1fr;
    gap: var(--s2);
    margin-top: var(--s4);
  }
  .elementor-element-process01 .elementor-widget-text-editor::before{ display: none !important; }
  .elementor-element-process01 .elementor-widget-text-editor p,
  .elementor-element-process01 .elementor-widget-text-editor p + p{
    /* min-height z desktopu (14rem) mnożone przez trzy wypychało sekcję
       poza ekran — na telefonie karta ma wysokość swojej treści. */
    min-height: 0;
    /* 24 (lewa) + 48 (odznaka) + 24 (odstęp) = 96 px = 6rem — ten sam skok
       co reszta skali; przy 5rem odstęp do tekstu spadał do 10 px. */
    padding: var(--s3) var(--s3) var(--s3) 6rem !important;
    border: 1px solid rgba(168,119,106,.34) !important;
    font-size: .9375rem;
    line-height: 1.6;
  }
  /* Na telefonie odznaka wraca do pozycjonowania bezwzględnego po lewej —
     karta jest wtedy pozioma i mieści trzy sztuki w jednym ekranie. */
  .elementor-element-process01 .elementor-widget-text-editor p::before{
    position: absolute;
    top: 50%;
    left: var(--s3);
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    transform: translateY(-50%);
    font-size: 1.25rem;
  }
  .elementor-element-process01 .elementor-widget-text-editor p:hover{ transform: none; }
  .elementor-element-process01 .elementor-widget-text-editor strong{
    font-size: 1.25rem;
    margin-bottom: var(--s1);
  }

  /* Galeria — na telefonie tekst nad mozaiką, mozaika 2 kolumny */
  .elementor-element-stones01 h2{ margin-bottom: var(--s1); }
  .elementor-element-stones01 .elementor-widget-text-editor{
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: var(--s2);
  }
  .elementor-element-stones01 .elementor-widget-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    row-gap: var(--s1);
    column-gap: 0;
  }
  .elementor-element-stones01 .elementor-widget-heading{ grid-row: 1; align-self: start; }
  .elementor-element-stones01 .elementor-widget-text-editor{ grid-row: 2; }
  .elementor-element-stones01 .elementor-element-aiimg10{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  /* Sekcja na telefonie rośnie swobodnie (min-height, nie height), więc wiersze
     `fr` nie mają czego dzielić — wysokość musi wynikać z proporcji kadrów.
     Kadr wiodący na pełną szerokość, cztery mniejsze w dwóch rzędach. */
  .mn-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    gap: var(--s1);
    height: auto;
  }
  .mn-gallery__item{ aspect-ratio: 4 / 3; }
  .mn-gallery__item--tall{ grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
  .mn-gallery__item img{ height: 100%; }
  .mn-gallery__item:hover img{ transform: none; }
  .mn-gallery__item figcaption{ opacity: 1; transform: none; font-size: .62rem; padding: 1.2rem .7rem .55rem; }
  .mn-gallery__note{ font-size: .62rem; }

  /* FAQ — na telefonie jedna kolumna, ciaśniejszy rytm */
  .elementor-element-faq0001 .elementor-widget-wrap{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 0;
  }
  .elementor-element-faq0001 .elementor-widget-heading{ grid-column: 1; grid-row: 1; align-self: start; }
  .elementor-element-faq0001 .elementor-widget-text-editor{ grid-column: 1; grid-row: 2; align-self: start; }
  .elementor-element-faq0001 h2{ margin-bottom: var(--s3); }
  .elementor-element-faq0001 .elementor-widget-text-editor p{ padding-block: var(--s2); }

  /* Sekcja zamykająca — kolumny jedna pod drugą */
  .mn-closing__logo{ width: clamp(170px, 52vw, 220px); }
  .mn-closing__inner{ gap: var(--s4); }
  .mn-closing__legal{ justify-content: flex-start; }

  /* Formularz — jedna kolumna pól */
  .miniatures-form fieldset:not([hidden]){ grid-template-columns: 1fr; }
  .miniatures-form__actions{ flex-direction: column; }
  .miniatures-form button{ width: 100%; }

  /* Na telefonie ikony wracają do przepływu (wymusza to social-icons.css),
     więc kreskę prowadzącą chowamy i wyrównujemy je do lewej osi treści. */
  .elementor-element-a001001{ padding-bottom: var(--s7) !important; }
  .elementor-element-a001001 .miniatures-socials{
    justify-content: flex-start;
    gap: var(--s4);
    margin-top: var(--s5);
  }
  .elementor-element-a001001 .miniatures-socials::before{ display: none; }
  .elementor-element-a001001 .miniatures-socials a:hover{ transform: none; }
  .elementor-element-a001001 > .elementor-container::after{ display: none; }
}

/* --- 15. DOSTĘPNOŚĆ ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type: none; scroll-behavior: auto; }
  .elementor-section{ scroll-snap-align: none; }
  .mn-js .elementor-section .elementor-widget{ opacity: 1 !important; }
  *,
  *::before,
  *::after{
    animation: none !important;
    transition: none !important;
  }
}