/* =============================================================
   Sala Weselno-Bankietowa Glamour - Chroboty
   Styl: Klasyczne glamour weddingowe (kremowy + złoto + ciemny hero)
   ============================================================= */

/* --- Zmienne globalne ---------------------------------------- */
:root {
  /* Tło / powierzchnie */
  --c-cream:        #f9f2e3;   /* główne tło - ciepły kremowy */
  --c-cream-2:      #f4ebd6;   /* sekcje */
  --c-cream-3:      #ede0c4;   /* karty / akcenty */
  --c-ivory:        #fffdf6;   /* highlight */
  --c-ink:          #1b1611;   /* tekst główny - głęboki ciemny brąz */
  --c-ink-soft:     #3a302a;   /* tekst drugorzędny */
  --c-ink-mute:     #6b5e51;   /* tekst pomocniczy */

  /* Sekcje dark */
  --c-dark:         #15110d;   /* tło hero/stopka */
  --c-dark-2:       #1f1a14;
  --c-dark-bone:    #efe6d2;   /* tekst na ciemnym */

  /* Złoto - szampańskie, ciepłe (klasyczne wedding gold) */
  --c-gold:         #b89150;   /* dominant */
  --c-gold-hi:      #d6b574;   /* highlight */
  --c-gold-deep:    #8a6a37;   /* deep / pressed */
  --c-gold-soft:    rgba(184, 145, 80, 0.4);

  /* Pudrowe akcenty Loovio (akwarela kwiatowa) */
  --c-rose:         #e7c9bc;   /* pudrowy róż */
  --c-rose-soft:    rgba(231, 201, 188, 0.45);
  --c-sage:         #9aa088;   /* delikatna szałwia / zieleń botaniczna */
  --c-sage-soft:    rgba(154, 160, 136, 0.35);

  /* Linie */
  --c-line:         rgba(184, 145, 80, 0.45);
  --c-line-cream:   rgba(27, 22, 17, 0.10);
  --c-line-dark:    rgba(239, 230, 210, 0.14);

  /* Typografia */
  --ff-display:     "Italiana", "Crimson Pro", "Cormorant Garamond", serif;
  --ff-serif:       "Crimson Pro", "Cormorant Garamond", Georgia, serif;
  --ff-body:        "Outfit", "Manrope", system-ui, sans-serif;

  /* Skale */
  --step--1:  clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0:   clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:   clamp(1.45rem, 1.30rem + 0.75vw, 1.85rem);
  --step-3:   clamp(1.85rem, 1.55rem + 1.5vw, 2.6rem);
  --step-4:   clamp(2.3rem, 1.85rem + 2.25vw, 3.6rem);
  --step-5:   clamp(3.0rem, 2.2rem + 4vw, 5.6rem);
  --step-6:   clamp(4.0rem, 2.4rem + 8vw, 8.0rem);

  --gutter: clamp(1.2rem, 2.5vw, 2.2rem);
  --max:    1380px;
  --radius: 2px;
  --transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Reset & podstawy ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; height: auto; }
button { font: inherit; cursor: pointer; background: transparent; border: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-gold); }

/* A11y utility: tekst widoczny tylko dla czytników ekranu / robotów SEO.
   Stosowane np. w H1 strony głównej, gdzie wizualnie wyświetlamy logo. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* D6: noise gradient na body::before usunięty - przy opacity 0.05 prawie niewidoczny,
   a SVG turbulence parse kosztuje czas przy starcie. */

/* --- Typografia ---------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p  { margin: 0 0 1em; color: var(--c-ink-soft); }

.display {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 400;
  color: var(--c-gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--c-gold);
}

.italic { font-style: italic; font-family: var(--ff-serif); color: var(--c-gold-deep); }
.italic.italic--inherit { color: inherit; }

.text-gold  { color: var(--c-gold-deep); }
.text-cream { color: var(--c-dark-bone); }

/* --- Layout utilities ---------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 900px); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; }
.section--cream-2 { background: var(--c-cream-2); }
.section--dark { background: var(--c-dark); color: var(--c-dark-bone); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-ivory); }
.section--dark p { color: var(--c-dark-bone); }
.section--dark .eyebrow { color: var(--c-gold-hi); }
.section--dark .eyebrow::before { background: var(--c-gold-hi); }

.section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 720px;
  margin-inline: auto;
}
.section-head .eyebrow { margin-bottom: 1.4rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head__lede { color: var(--c-ink-mute); font-size: var(--step-1); line-height: 1.5; }
.section--dark .section-head__lede { color: var(--c-dark-bone); opacity: 0.85; }

/* Ornament środkowy */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 1rem 0 1.6rem;
  color: var(--c-gold);
}
.ornament::before, .ornament::after {
  content: "";
  width: 60px; height: 1px;
  background: var(--c-gold);
}
.ornament svg { width: 22px; height: 22px; }

/* --- Przyciski ----------------------------------------------- */
.btn {
  --bg: transparent;
  --fg: var(--c-ink);
  --bd: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.9rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.btn::after {
  content: "→";
  display: inline-block;
  transition: transform var(--transition);
}
.btn:hover::after { transform: translateX(4px); }

.btn--gold   { --bg: var(--c-gold); --fg: var(--c-ivory); --bd: var(--c-gold); }
.btn--gold:hover { --bg: var(--c-gold-deep); --bd: var(--c-gold-deep); }

.btn--ghost  { --bg: transparent; --fg: var(--c-ink); --bd: var(--c-ink); }
.btn--ghost:hover { --bg: var(--c-ink); --fg: var(--c-ivory); }

.btn--light  { --bg: transparent; --fg: var(--c-ivory); --bd: var(--c-ivory); }
.btn--light:hover { --bg: var(--c-ivory); --fg: var(--c-ink); }

.btn--gold-on-dark { --bg: var(--c-gold); --fg: var(--c-dark); --bd: var(--c-gold); }
.btn--gold-on-dark:hover { --bg: var(--c-gold-hi); --bd: var(--c-gold-hi); }

/* --- Header / Nawigacja -------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 1.1rem;
  transition: padding var(--transition), color var(--transition);
  background: linear-gradient(180deg, rgba(21,17,13,0.7), rgba(21,17,13,0));
  color: var(--c-ivory);
}
/* Cream "scrolled/light" layer lives on a ::before pseudo, not on the header.
   backdrop-filter on the header would create a containing block for fixed-positioned
   descendants and clip the mobile drawer to header bounds instead of the viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(249, 242, 227, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line-cream);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.site-header.is-scrolled::before,
.site-header--light::before { opacity: 1; }

.site-header.is-scrolled {
  padding-block: 0.7rem;
  color: var(--c-ink);
}
.site-header.is-scrolled .brand__name { color: var(--c-ink); }
.site-header.is-scrolled .nav__cta { color: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.site-header.is-scrolled .nav__cta:hover { background: var(--c-gold-deep); color: var(--c-ivory); }

/* Wersja od razu jasna (na podstronach) */
.site-header--light { color: var(--c-ink); }
.site-header--light .brand__name,
.site-header--light .nav__menu a { color: var(--c-ink); }
.site-header--light .nav__cta { color: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.site-header--light .nav__cta:hover { background: var(--c-gold-deep); color: var(--c-ivory); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: inherit;
  gap: 3px;
  transition: opacity var(--transition);
}
/* Hero na index.html: header jest przezroczysty (brak .is-scrolled / --light),
   a w hero pokazujemy duże logo. Brand + CTA "Rezerwacja terminu" w nav
   ukrywamy, żeby nie konkurowały z hero - pojawiają się fade-in po scrollu
   (gdy JS doda .is-scrolled) lub od razu na podstronach (.site-header--light). */
.site-header:not(.is-scrolled):not(.site-header--light) .brand,
.site-header:not(.is-scrolled):not(.site-header--light) .nav__cta {
  opacity: 0;
  pointer-events: none;
}
/* Gdy mobile drawer otwarty, header dostaje kremowe tło - brand musi być widoczny. */
.site-header:has(.nav__menu.is-open) .brand {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Logo używa CSS mask - kolor dziedziczony z currentColor,
   więc dostosowuje się do tła (ivory na ciemnym, ink na jasnym). */
.brand__logo {
  display: block;
  /* Płynna skala 210px→300px od 360px do 1100px viewportu (aspect-ratio 10:3 utrzymany).
     Wcześniej był ostry jump 300→210 na 720px. */
  width: clamp(210px, 166px + 12vw, 300px);
  aspect-ratio: 10 / 3;
  background-color: currentColor;
  -webkit-mask: url('../assets/logo.png') center/contain no-repeat;
          mask: url('../assets/logo.png') center/contain no-repeat;
}
.brand__sub {
  font-size: 0.58rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-gold-hi);
  margin-top: 0;
  font-weight: 300;
}
.site-header.is-scrolled .brand__sub,
.site-header--light .brand__sub { color: var(--c-gold-deep); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__menu a {
  position: relative;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding-block: 0.5rem;
  color: inherit;
  white-space: nowrap;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--transition);
}
.nav__menu a:hover::after,
.nav__menu a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__menu a[aria-current="page"] { color: var(--c-gold-hi); }
.site-header.is-scrolled .nav__menu a[aria-current="page"],
.site-header--light .nav__menu a[aria-current="page"] { color: var(--c-gold-deep); }

.nav__cta {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--c-gold-hi);
  color: var(--c-gold-hi);
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.nav__cta:hover { background: var(--c-gold-hi); color: var(--c-dark); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid currentColor;
  color: inherit;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* --- Hero ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* treść siada na dole - pełne video u góry */
  overflow: hidden;
  isolation: isolate;
  background: var(--c-dark);
  color: var(--c-ivory);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05);
}
/* "Movie poster" scrim - czyste video górą (lekki cień pod header),
   od ~35% w dół stopniowo ciemnieje od krawędzi. Tekst siada na ciemnej bazie. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(21,17,13,0.82) 0%,
      rgba(21,17,13,0.18) 10%,
      rgba(21,17,13,0)    22%,
      rgba(21,17,13,0)    35%,
      rgba(21,17,13,0.45) 55%,
      rgba(21,17,13,0.92) 80%,
      rgba(21,17,13,1.00) 100%);
  pointer-events: none;
}

.hero__inner {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 3.5rem;
  padding-inline: var(--gutter);
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  isolation: isolate;
}
/* Miękki, szeroki radial pod samym tytułem - extra kontrast bez widocznych krawędzi.
   Blur rozmywa brzegi tak, że scrim wtapia się w gradient na video. */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -30% -25% 0 -25%;
  background: radial-gradient(
    ellipse 70% 60% at center 55%,
    rgba(21,17,13,0.72) 0%,
    rgba(21,17,13,0.45) 35%,
    rgba(21,17,13,0.22) 60%,
    rgba(21,17,13,0)    90%
  );
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
}
.hero__pre {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.4rem, 0.18rem + 0.6vw, 1rem);
  /* Płynne skalowanie typografii eyebrow - liniowa interpolacja od 360px do 1100px viewportu.
     Endpoints dobrane tak, by na ekstremach trafić w dawne wartości desktop/mobile,
     a w między zmieniać się płynnie razem z .hero__logo (które ma width: min(92vw, 900px)). */
  font-size: clamp(0.62rem, 0.58rem + 0.17vw, 0.7rem);
  letter-spacing: clamp(0.24em, calc(0.05em + 0.5vw), 0.55em);
  text-transform: uppercase;
  color: var(--c-dark-bone);
  /* Stamp lokalizacyjny pod logiem - mocno ujemny top kompensuje wewnętrzny
     whitespace w PNG logo (mask + aspect-ratio 3/1 rezerwują wysokość, której
     ornament nie wykorzystuje). Wciąga eyebrow tuż pod ozdobne pętle. */
  margin: -2.15rem auto 1.65rem;
  /* Silny halo zapewnia czytelność na każdej części video (jasne ściany itp.) */
  text-shadow: 0 0 14px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.9), 0 1px 2px rgba(0,0,0,0.7);
}
.hero__pre::before, .hero__pre::after {
  content: "";
  /* Kreski też płyną - z 50px na desktopie do ~14px przy 360px viewportu.
     Nie znikają - poniżej breakpointu mobilnego (gdzie .hero__pre staje się block)
     i tak są ukryte przez display: none. */
  width: clamp(14px, 4vw, 50px);
  height: 1px;
  background: var(--c-gold-hi);
  opacity: 0.7;
}
.hero__title {
  /* Teraz pełni rolę kontenera dla subtytułu (.hero__title-text) + logo (.hero__logo).
     Typografia subtytułu jest na .hero__title-text. */
  margin: 0;
  text-align: center;
  color: var(--c-ivory);
}
.hero__title-text {
  display: block;
  font-family: var(--ff-serif); /* Crimson Pro - zgodnie z aktualnymi nagłówkami */
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--c-ivory);
  opacity: 0.92;
  margin-bottom: 0.3em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 0 12px rgba(0,0,0,0.45);
}
.hero__title em {
  display: block;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.52em;
  color: var(--c-gold-hi);
  letter-spacing: 0.01em;
  margin-top: 0.35em;
  font-weight: 300;
  text-shadow: 0 0 22px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.55);
}
/* Brandmark w hero - duże logo zamiast tekstowego "Glamour".
   Mask + currentColor pozwala dziedziczyć kolor (złoty akcent),
   identyczny mechanizm jak .brand__logo w nawigacji. */
.hero__logo {
  display: block;
  /* Width jako clamp: dolny limit (280px) i górny (900px) z liniową interpolacją w międzyczasie.
     Poprzednio na ≤720px max był ścinany do 640px - co tworzyło maleńki garb przy crossover.
     Teraz jeden płynny przebieg, bez breakpointu. */
  width: clamp(280px, 92vw, 900px);
  aspect-ratio: 3 / 1;
  /* Negatywne marginy block - logo.png ma sporo wewnętrznego whitespace
     wokół zawartości; przyciąga tekst nad (subtytuł) i eyebrow pod bliżej. */
  margin: -0.25em auto -0.3em;
  /* TranslateY też płynnie - dawniej 3rem→1.45rem na 720px (~25px nagłego skoku).
     Teraz liniowa interpolacja od 1.45rem (przy 360px) do 3rem (przy 1100px+). */
  transform: translateY(clamp(1.45rem, 0.7rem + 3.35vw, 3rem));
  background-color: currentColor;
  color: var(--c-gold-hi);
  -webkit-mask: url('../assets/logo.png') center/contain no-repeat;
          mask: url('../assets/logo.png') center/contain no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  filter: drop-shadow(0 4px 26px rgba(0,0,0,0.55)) drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.hero__sub {
  max-width: 52ch;
  margin: 1.4rem auto 2rem;
  color: var(--c-ivory);
  opacity: 0.92;
  font-size: var(--step-0);
  line-height: 1.55;
  font-weight: 300;
}
.hero__cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
/* Strzałka "Przewiń" - schowana, bo awards zajmują dolną cz. hero */
.hero__scroll { display: none; }
@keyframes drip {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1;   }
}

/* Pasek z odznaczeniami - wzdłuż dolnej krawędzi hero, cieńki, elegancki */
.hero__awards {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(0.85rem, 0.78rem + 0.15vw, 1rem) var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.7rem, 2.5vw, 2.4rem);
  flex-wrap: wrap;
  color: var(--c-ivory);
  opacity: 0.85;
  /* Płynna skala razem z .hero__logo - od 0.55rem na 360px do 0.62rem na 1100px+. */
  font-size: clamp(0.55rem, 0.52rem + 0.15vw, 0.62rem);
  letter-spacing: clamp(0.28em, calc(0.16em + 0.6vw), 0.36em);
  text-transform: uppercase;
  border-top: 1px solid rgba(214, 181, 116, 0.22);
  background: linear-gradient(180deg, rgba(21,17,13,0) 0%, rgba(21,17,13,0.7) 100%);
}
.hero__awards span { display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__awards span::before {
  content: "✦";
  color: var(--c-gold-hi);
  font-size: 0.85em;
}

/* --- Intro / split layout ------------------------------------ */
.intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.intro__visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.intro__visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s ease;
}
.intro__visual:hover img { transform: scale(1.05); }
.intro__visual--offset { margin-top: 4rem; }
.intro__visual--offset::before {
  content: "";
  position: absolute;
  inset: -22px -22px 22px 22px;
  border: 1px solid var(--c-gold);
  pointer-events: none;
  z-index: -1;
}
.intro__body .eyebrow { margin-bottom: 1.4rem; }
.intro__body h2 { margin-bottom: 1.8rem; }
.intro__body p  { color: var(--c-ink-soft); max-width: 50ch; font-size: 1.05rem; }
.intro__signature {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--c-gold-deep);
  font-family: var(--ff-display);
  font-size: 1.7rem;
}
.intro__signature::before {
  content: "";
  width: 50px; height: 1px;
  background: var(--c-gold);
}

/* --- Stats --------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--c-line);
}
.stat {
  padding: 2.6rem 1.6rem;
  text-align: center;
  border-right: 1px solid var(--c-line);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  color: var(--c-gold-deep);
  line-height: 1;
  display: block;
}
.section--dark .stat__num { color: var(--c-gold-hi); }
.stat__label {
  margin-top: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.section--dark .stat__label { color: var(--c-dark-bone); opacity: 0.8; }

/* --- Features ------------------------------------------------ */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
}
.feature {
  background: var(--c-cream);
  padding: 2.8rem 2rem;
  text-align: center;
  cursor: default;
}
.section--cream-2 .feature { background: var(--c-cream-2); }
.feature__icon {
  display: grid; place-items: center;
  color: var(--c-gold-deep);
  margin: 0 auto 1.4rem;
}
.feature__icon svg { width: 101px; height: 101px; }
.feature h3 {
  font-size: var(--step-2);
  margin-bottom: 0.9rem;
  position: relative;
  padding-bottom: 0.9rem;
}
.feature h3::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 24px;
  height: 1px;
  background: var(--c-gold);
}
.feature p { color: var(--c-ink-mute); font-size: 0.95rem; margin: 0; }

/* --- Oferta cards (na stronie głównej) ----------------------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.offer-card {
  position: relative;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line);
  padding: 2.4rem 2rem 2rem;
  transition: transform var(--transition), background var(--transition);
  overflow: hidden;
}
.offer-card:hover { transform: translateY(-6px); background: var(--c-ivory); }
.offer-card::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--c-gold);
  transition: width 0.9s ease;
}
.offer-card:hover::before { width: 100%; }
.offer-card__num {
  font-family: var(--ff-display);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  color: var(--c-gold-deep);
  margin-bottom: 1rem;
  display: block;
}
.offer-card h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.offer-card p  { color: var(--c-ink-mute); font-size: 0.95rem; }
.offer-card__more {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 400;
}
.offer-card__more::after { content: "→"; transition: transform var(--transition); }
.offer-card:hover .offer-card__more::after { transform: translateX(4px); }

/* --- Pakiety (na stronie oferty - szczegółowe) --------------- */
.package {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  background: var(--c-ivory);
  border: 1px solid var(--c-line);
  overflow: hidden;
  margin-bottom: 2rem;
}
.package--reverse { grid-template-columns: 1.2fr 1fr; }
.package__visual {
  position: relative;
  overflow: hidden;
  min-height: 380px;
}
.package__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.package:hover .package__visual img { transform: scale(1.04); }
.package__body { padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; }
.package__body .eyebrow { margin-bottom: 1rem; }
.package h3 { font-size: var(--step-3); margin-bottom: 1.2rem; }
.package p  { color: var(--c-ink-soft); margin-bottom: 1.4rem; }
.package__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: grid;
  gap: 0.7rem;
}
.package__list li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
}
.package__list li::before {
  content: "✦";
  color: var(--c-gold);
  font-size: 0.7em;
  flex-shrink: 0;
}

/* --- Galeria ------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 0.9rem;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--c-cream-3);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s ease, filter 0.5s ease;
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid transparent;
  transition: border-color var(--transition), background var(--transition);
  pointer-events: none;
}
.gallery__item:hover::after {
  border-color: var(--c-gold);
  background: linear-gradient(180deg, transparent 60%, rgba(21,17,13,0.25) 100%);
}

.gallery__item--w2 { grid-column: span 2; }
.gallery__item--w3 { grid-column: span 3; }
.gallery__item--h2 { grid-row: span 2; }

/* Variant na stronie głównej - 4 zdjęcia */
.gallery--strip {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 320px;
}

/* --- Karty testimonials --------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  margin-top: 1rem;
}
.testimonial-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.testimonial-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(214, 181, 116, 0.3);
  transform: translateY(-4px);
}
.testimonial-card::before {
  content: "“";
  position: absolute;
  top: 0.2rem;
  right: 1.4rem;
  font-family: var(--ff-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--c-gold);
  opacity: 0.25;
}
.testimonial-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.testimonial-card__avatar {
  width: 42px; height: 42px;
  background: var(--av-bg, var(--c-gold-deep));
  color: var(--c-ivory);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: 1.4rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.testimonial-card__name {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  color: var(--c-ivory);
  line-height: 1.2;
}
.testimonial-card__rating {
  color: var(--c-gold-hi);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-top: 0.2rem;
}
.testimonial-card__text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--c-dark-bone);
  margin: 0;
}
.testimonial-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.testimonial-card__tag {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-hi);
  opacity: 0.85;
}
.testimonial-card__src {
  width: 16px; height: 16px;
  opacity: 0.7;
}

/* --- Testimonials -------------------------------------------- */
.testimonial-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.testimonial {
  padding: 2.6rem 2.2rem;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-cream);
  position: relative;
}
.section--dark .testimonial { background: var(--c-dark-2); border-color: var(--c-line-dark); }
.testimonial__quote {
  font-size: 3.6rem;
  font-family: var(--ff-display);
  line-height: 0.6;
  color: var(--c-gold);
  margin-bottom: 0.6rem;
}
.testimonial p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 1.6rem;
}
.section--dark .testimonial p { color: var(--c-ivory); }
.testimonial__rating { color: var(--c-gold); letter-spacing: 0.2em; margin-bottom: 1rem; }
.testimonial cite {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
}
.section--dark .testimonial cite { color: var(--c-gold-hi); }

/* --- CTA band ------------------------------------------------ */
.band {
  text-align: center;
  padding-block: clamp(5rem, 9vw, 8rem);
  position: relative;
  isolation: isolate;
  color: var(--c-ivory);
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: var(--c-dark) center/cover no-repeat;
  background-image: linear-gradient(180deg, rgba(21,17,13,0.78), rgba(21,17,13,0.94)),
                    url("../assets/img/galeria/glamour-12.jpg");
  background-attachment: fixed;
}
.band h2 { color: var(--c-ivory); font-family: var(--ff-display); margin-bottom: 1rem; }
.band p  { color: var(--c-dark-bone); opacity: 0.9; max-width: 56ch; margin-inline: auto; margin-bottom: 2.2rem; }
.band__phones {
  margin-top: 2.4rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--ff-display);
}
.band__phones a {
  color: var(--c-gold-hi);
  font-size: var(--step-2);
  letter-spacing: 0.05em;
}
.band__phones a:hover { color: var(--c-ivory); }

/* --- Page header (podstrony) -------------------------------- */
.page-header {
  padding-top: 12rem;
  padding-bottom: 5.5rem;
  text-align: center;
  position: relative;
  background: var(--c-cream-2);
  border-bottom: 1px solid var(--c-line-cream);
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(184,145,80,0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.page-header > * { position: relative; z-index: 1; }
.page-header .eyebrow { margin-bottom: 1.6rem; }
.page-header h1 {
  font-family: var(--ff-display);
  font-size: var(--step-5);
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.page-header h1 em {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-gold-deep);
  font-weight: 400;
}
.page-header__lede {
  max-width: 60ch;
  margin: 1.6rem auto 0;
  color: var(--c-ink-mute);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
}

/* --- Footer -------------------------------------------------- */
.site-footer {
  background: var(--c-dark);
  color: var(--c-dark-bone);
  border-top: 1px solid var(--c-gold-soft);
  padding-block: 4.5rem 1.6rem;
  font-size: 0.92rem;
}
.site-footer a { color: var(--c-dark-bone); }
.site-footer a:hover { color: var(--c-gold-hi); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--c-line-dark);
}
.footer-grid h4 {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold-hi);
  margin-bottom: 1.3rem;
  font-weight: 400;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.6rem; color: var(--c-dark-bone); }
.footer-brand { text-align: center; }
.footer-brand .brand { margin-bottom: 1rem; color: var(--c-ivory); }
.footer-brand .brand__logo { width: 340px; height: 102px; }
.footer-brand p { color: var(--c-dark-bone); opacity: 0.8; max-width: 34ch; line-height: 1.6; margin-inline: auto; }

.footer-fb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-fb svg { width: 14px; height: 14px; fill: currentColor; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--c-dark-bone);
  opacity: 0.75;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Forms --------------------------------------------------- */
.form {
  display: grid;
  gap: 1.6rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.field { display: flex; flex-direction: column; }
.field label {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: 0.5rem;
}
.field input, .field textarea, .field select {
  background: var(--c-ivory);
  border: 1px solid var(--c-gold-soft);
  border-radius: 4px;
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: 1rem;
  padding: 0.95rem 1.1rem;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.field input:hover, .field textarea:hover, .field select:hover {
  border-color: var(--c-gold);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--c-gold-deep);
  background: var(--c-ivory);
  box-shadow: 0 0 0 3px rgba(184, 145, 80, 0.15);
}
.field textarea { resize: vertical; min-height: 130px; }
.form__note { font-size: 0.8rem; color: var(--c-ink-mute); margin: 0; }

#formularz { scroll-margin-top: 110px; }

/* --- Lightbox ------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(11, 9, 6, 0.96);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 30px 100px -10px rgba(0,0,0,0.8);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: transparent;
  border: 1px solid var(--c-gold-hi);
  color: var(--c-gold-hi);
}
.lightbox__close {
  top: 1.6rem; right: 1.6rem;
  width: 48px; height: 48px;
  font-size: 1.4rem;
  line-height: 1;
}
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  font-size: 1.6rem;
}
.lightbox__nav--prev { left: 1.6rem; }
.lightbox__nav--next { right: 1.6rem; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--c-gold-hi); color: var(--c-dark); }

/* --- Reveal animations --------------------------------------- */
/* Domyślnie elementy są widoczne (no-JS / SEO / screenshotów).
   Klasa .js-ready jest doklejana przez JS do <html> - wtedy aktywuje się stan początkowy. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-ready .reveal {
  opacity: 0;
  transform: translateY(34px);
}
.js-ready .reveal.is-in,
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.15s; }
.reveal--delay-2 { transition-delay: 0.3s; }
.reveal--delay-3 { transition-delay: 0.45s; }
.reveal--delay-4 { transition-delay: 0.6s; }

/* --- Map ----------------------------------------------------- */
.map {
  width: 100%;
  height: 500px;
  border: 1px solid var(--c-line);
  filter: sepia(0.15) saturate(0.85);
  transition: filter var(--transition);
}
.map:hover { filter: none; }

/* --- Contact grid -------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.contact-info__item {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-line-cream);
}
.contact-info__item:last-child { border-bottom: none; }
.contact-info__label {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: 0.5rem;
}
.contact-info__value {
  font-family: var(--ff-serif);
  font-size: var(--step-2);
  color: var(--c-ink);
  line-height: 1.3;
}
.contact-fb {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.contact-fb svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  flex-shrink: 0;
  transform: translateY(0.02em);
}

/* --- Marquee ornamentowa ------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--c-line);
  background: var(--c-cream-2);
  padding-block: 0.4rem;
}
.section--dark + .marquee,
.marquee--dark {
  background: var(--c-dark-2);
  border-color: var(--c-line-dark);
  color: var(--c-ivory);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee__item {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 3.5vw, 2.8rem);
  color: var(--c-ink);
  padding: 1.2rem 1.6rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
}
.marquee--dark .marquee__item { color: var(--c-ivory); }
.marquee__item::after {
  content: "✦";
  color: var(--c-gold);
  font-size: 0.5em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================
   LOOVIO-INSPIRED COMPONENTS - duże cytaty, karty usług, "kim jesteśmy"
   ============================================================= */

/* Cytat-blok: duży serif na środku, sygnatura w kursywie pod spodem */
.quote-block {
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
}
.quote-block__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 1.6rem;
  opacity: 0.7;
}
.quote-block__mark svg { width: 50px; height: 30px; color: var(--c-sage); }
.quote-block__text {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0 0 2rem;
}
.quote-block__body {
  font-family: var(--ff-body);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  color: var(--c-ink-mute);
  max-width: 68ch;
  margin: 0 auto 2.6rem;
  line-height: 1.55;
}
.quote-block__sign {
  font-family: "Pinyon Script", "Italianno", cursive;
  font-size: clamp(2.9rem, 3.8vw, 3.5rem);
  color: var(--c-gold-deep);
  font-weight: 400;
  line-height: 1;
}

/* Karty usług - 3 kolumny z dużym zdjęciem, opisem i CTA */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
}
.service {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.service__visual {
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 1.8rem;
  background: var(--c-cream-3);
}
.service__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s ease;
}
.service:hover .service__visual img { transform: scale(1.05); }
.service h3 {
  font-family: var(--ff-serif);
  font-size: var(--step-2);
  margin-bottom: 0.9rem;
  color: var(--c-ink);
}
.service p {
  font-size: 0.95rem;
  color: var(--c-ink-mute);
  max-width: 32ch;
  margin: 0 auto 1.4rem;
  line-height: 1.6;
}
.service__more {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-gold);
  align-self: center;
  margin-top: auto;
  transition: color var(--transition), border-color var(--transition);
}
.service__more:hover { color: var(--c-gold-deep); border-color: var(--c-gold-deep); }

/* "Kim jesteśmy" - duże zdjęcie po lewej, biała karta po prawej z napisem */
.about-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.about-split__visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.about-split__visual img,
.about-split__visual video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.about-split__card {
  background: var(--c-ivory);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-left: -8%;
  margin-top: 12%;
  margin-bottom: 12%;
  box-shadow: 0 30px 80px -30px rgba(27,22,17,0.18);
}
.about-split__card .eyebrow { margin-bottom: 1.4rem; }
.about-split__card h2 {
  font-family: var(--ff-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1.4rem;
  color: var(--c-ink);
}
.about-split__card p {
  color: var(--c-ink-mute);
  font-size: 0.98rem;
  margin-bottom: 1.8rem;
  line-height: 1.7;
}

/* Botaniczna ornamenta - gałązka liści jako narożny akcent */
.botanical {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
.botanical svg { width: 100%; height: 100%; }
.botanical--top-left  { top: -40px; left: -30px; width: 180px; height: 180px; }
.botanical--top-right { top: -40px; right: -30px; width: 180px; height: 180px; transform: scaleX(-1); }
.botanical--bottom-left  { bottom: -40px; left: -30px; width: 200px; height: 200px; transform: scaleY(-1); }
.botanical--bottom-right { bottom: -40px; right: -30px; width: 200px; height: 200px; transform: scale(-1, -1); }

/* Subtelna pieczęć/ornament między sekcjami */
.seal {
  display: flex;
  justify-content: center;
  margin-block: clamp(2rem, 4vw, 3.5rem);
  opacity: 0.55;
}
.seal svg { width: 64px; height: 32px; color: var(--c-gold-deep); }

/* =============================================================
   PAKIETY WESELNE - 3 karty (Brązowy / Srebrny / Złoty)
   ============================================================= */

:root {
  --c-bronze:    #a07845;
  --c-bronze-hi: #c69566;
  --c-silver:    #9a9a9a;
  --c-silver-hi: #c8c8c8;
}

.packages {
  display: grid;
  grid-template-columns: 1fr 1fr 1.08fr;
  gap: clamp(1.4rem, 2.5vw, 2.4rem);
  align-items: stretch;
}

.package-card {
  position: relative;
  background: var(--c-ivory);
  border: 1px solid var(--c-line-cream);
  padding: clamp(2rem, 3vw, 3rem) clamp(1.6rem, 2.5vw, 2.4rem) clamp(2rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}
.package-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, var(--c-gold));
}
.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(27,22,17,0.18);
}

/* Featured (gold) - większy, z badge */
.package-card--featured {
  background:
    linear-gradient(180deg, rgba(247,235,210,0.7) 0%, var(--c-ivory) 80%);
  border-color: rgba(184,145,80,0.5);
  box-shadow: 0 25px 60px -30px rgba(184,145,80,0.4);
}
.package-card--featured::before { height: 6px; }
.package-card__badge {
  position: absolute;
  top: 22px; right: -38px;
  background: var(--c-gold);
  color: var(--c-ivory);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.45rem 3rem;
  transform: rotate(45deg);
  font-weight: 400;
  pointer-events: none;
}

/* Tytuł pakietu - wyraźny, dominujący nad kartą */
.package-card__eyebrow {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
}
.package-card__title {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  text-align: center;
  color: var(--accent, var(--c-ink));
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1;
}
.package-card--featured .package-card__title { color: var(--c-gold-deep); }
.package-card__tagline {
  text-align: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  margin: 0.5rem 0 1.8rem;
}
.package-card__divider {
  width: 60px;
  height: 1px;
  background: var(--accent, var(--c-gold));
  opacity: 0.7;
  margin: 0 auto 1.6rem;
}

.package-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.85rem;
}
.package-card__list li {
  display: flex;
  gap: 0.8rem;
  font-size: 0.93rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.package-card__list li::before {
  content: "✦";
  color: var(--accent, var(--c-gold));
  flex-shrink: 0;
  font-size: 0.7em;
  line-height: 1.8;
}
.package-card__highlight {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-gold-deep);
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid var(--c-line-cream);
  margin: 0 0 1.4rem;
}

.package-card__cta {
  margin-top: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.package-card__askmore {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  transition: color var(--transition);
}
.package-card__askmore:hover { color: var(--c-gold-deep); }

/* Akcenty per karta */
.package-card--bronze  { --accent: var(--c-bronze); }
.package-card--silver  { --accent: var(--c-silver); }
.package-card--gold    { --accent: var(--c-gold); }

/* Buttony w kolorze pakietu */
.package-card--bronze .btn--ghost {
  --bd: var(--c-bronze);
  --fg: var(--c-bronze);
}
.package-card--bronze .btn--ghost:hover { --bg: var(--c-bronze); --fg: var(--c-ivory); }

.package-card--silver .btn--ghost {
  --bd: #6e6e6e;
  --fg: #4a4a4a;
}
.package-card--silver .btn--ghost:hover { --bg: #6e6e6e; --fg: var(--c-ivory); }

/* =============================================================
   MENU MODAL - pełna karta menu pakietu, styl papierowy art deco
   ============================================================= */

.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(11, 9, 6, 0.78);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow-y: auto;
}
.menu-modal.is-open {
  display: flex;
  animation: modalFade 0.4s ease;
}
@keyframes modalFade {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}

.menu-modal__paper {
  background: var(--c-ivory);
  /* delikatna tekstura papieru */
  background-image:
    radial-gradient(circle at 30% 20%, rgba(184,145,80,0.04), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(184,145,80,0.04), transparent 50%);
  max-width: 920px;
  width: 100%;
  margin: auto 0;
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1.6rem, 3.5vw, 3.5rem);
  position: relative;
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.6);
  animation: modalRise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--c-ink);
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Dekoracyjna ramka art deco - podwójna linia ze złotem */
.menu-modal__paper::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184,145,80,0.55);
  pointer-events: none;
}
.menu-modal__paper::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(184,145,80,0.25);
  pointer-events: none;
}

/* Ornamentowe rogi (SVG przez pseudo-elementy) */
.menu-modal__corner {
  position: absolute;
  width: 50px;
  height: 50px;
  color: var(--c-gold-deep);
  pointer-events: none;
}
.menu-modal__corner svg { width: 100%; height: 100%; }
.menu-modal__corner--tl { top: 18px; left: 18px; }
.menu-modal__corner--tr { top: 18px; right: 18px; transform: scaleX(-1); }
.menu-modal__corner--bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.menu-modal__corner--br { bottom: 18px; right: 18px; transform: scale(-1, -1); }

.menu-modal__close {
  position: absolute;
  top: 28px; right: 28px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--c-gold-deep);
  color: var(--c-gold-deep);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.menu-modal__close:hover {
  background: var(--c-gold-deep);
  color: var(--c-ivory);
  transform: rotate(90deg);
}

/* Header z logo i tytułem */
.menu-modal__head {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.menu-modal__logo {
  display: block;
  width: 180px;
  height: 56px;
  margin: 0 auto 1rem;
  background-color: var(--c-ink);
  -webkit-mask: url('../assets/logo.png') center/contain no-repeat;
          mask: url('../assets/logo.png') center/contain no-repeat;
}
.menu-modal__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  letter-spacing: 0.16em;
  margin: 0.2rem 0 0.4rem;
  color: var(--c-ink);
  font-weight: 400;
}
.menu-modal__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.6rem 0 1rem;
  color: var(--c-gold);
}
.menu-modal__divider::before,
.menu-modal__divider::after {
  content: "";
  width: 80px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.5;
}
.menu-modal__divider span {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
}
.menu-modal__subtitle {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: var(--accent, var(--c-gold-deep));
  letter-spacing: 0.04em;
  margin: 0.6rem 0 0;
}
.menu-modal__tagline {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-ink-mute);
  margin-top: 0.4rem;
}

.menu-modal__body {
  position: relative;
  z-index: 2;
  padding-block: 1rem;
}

/* Grupa sekcji - np. "Posiłki gorące", "Bufet zimny" - z dużym nagłówkiem i ornamentem */
.menu-modal__group {
  margin-bottom: 2.4rem;
}
.menu-modal__group-title {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--c-gold-deep);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.menu-modal__group-title::before,
.menu-modal__group-title::after {
  content: "";
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.55;
}

/* Grid sekcji - 2 kolumny żeby było mniej przytłaczające */
.menu-modal__group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 2.2rem;
}
.menu-modal__group-grid--single { grid-template-columns: 1fr; }

.menu-modal__section {
  break-inside: avoid;
}
.menu-modal__section--wide { grid-column: 1 / -1; }

.menu-modal__body h4 {
  font-family: var(--ff-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(184,145,80,0.4);
}
.menu-modal__body h4 em {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--c-gold-deep);
  margin-left: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
}
.menu-modal__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-modal__body li {
  font-family: var(--ff-serif);
  font-size: 1.02rem;
  color: var(--c-ink-soft);
  line-height: 1.4;
  margin-bottom: 0.3rem;
  padding-left: 1rem;
  position: relative;
}
.menu-modal__body li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--c-gold);
}

.menu-modal__section--featured {
  background: rgba(184,145,80,0.12);
  border-left: 3px solid var(--c-gold);
  padding: 1rem 1.4rem;
  margin-top: 1rem;
}
.menu-modal__section--featured h4 { color: var(--c-gold-deep); border-bottom-color: var(--c-gold); }

.menu-modal__footnote {
  margin-top: 1.6rem;
  text-align: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-ink-mute);
  border-top: 1px solid rgba(184,145,80,0.3);
  padding-top: 1.2rem;
}

/* Akcent koloru per pakiet */
.menu-modal[data-pkg="bronze"] { --accent: var(--c-bronze); }
.menu-modal[data-pkg="silver"] { --accent: var(--c-silver); }
.menu-modal[data-pkg="gold"]   { --accent: var(--c-gold-deep); }

@media (max-width: 720px) {
  .menu-modal__paper { padding: 2.2rem 1.4rem; }
  .menu-modal__paper::before { inset: 8px; }
  .menu-modal__paper::after { inset: 13px; }
  .menu-modal__corner { width: 36px; height: 36px; }
  .menu-modal__corner--tl, .menu-modal__corner--tr { top: 14px; }
  .menu-modal__corner--tl { left: 14px; }
  .menu-modal__corner--tr { right: 14px; }
  .menu-modal__corner--bl, .menu-modal__corner--br { bottom: 14px; }
  .menu-modal__corner--bl { left: 14px; }
  .menu-modal__corner--br { right: 14px; }
  .menu-modal__body ul { column-count: 1; }
  .menu-modal__close { top: 16px; right: 16px; width: 38px; height: 38px; }
  .menu-modal__logo { width: 140px; height: 44px; }
}

/* Collapse z pełnym menu pod kartami */
.package-menu {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  background: var(--c-cream-2);
  border: 1px solid var(--c-line-cream);
  padding: clamp(2rem, 4vw, 3rem);
}
.package-menu__head {
  text-align: center;
  margin-bottom: 2rem;
}
.package-menu__head .eyebrow { justify-content: center; display: inline-flex; margin-bottom: 0.8rem; }
.package-menu__head h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  margin: 0;
}
.package-menu__tabs {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
  flex-wrap: wrap;
}
.package-menu__tab {
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-family: var(--ff-body);
}
.package-menu__tab:hover { color: var(--c-gold-deep); border-color: var(--c-gold-deep); }
.package-menu__tab.is-active { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); }
.package-menu__panel { display: none; }
.package-menu__panel.is-active { display: block; }
.package-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
.package-menu__col h4 {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--c-line);
  font-weight: 400;
}
.package-menu__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.package-menu__col li {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  padding-left: 1rem;
  position: relative;
  line-height: 1.45;
}
.package-menu__col li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--c-gold);
}

@media (max-width: 980px) {
  .packages { grid-template-columns: 1fr; }
  .package-card__badge { top: 12px; right: -52px; padding: 0.35rem 3.5rem; }
}

/* --- Page-specific blocks ------------------------------------ */
/* Sala: dwie kolumny opisu i obraz */
.feature-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row--reverse { grid-template-columns: 1fr 1.1fr; }
.feature-row--reverse .feature-row__visual { order: 2; }
.feature-row__visual {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
}
.feature-row__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.feature-row:hover .feature-row__visual img { transform: scale(1.04); }
.feature-row__visual--frame::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid var(--c-gold);
  z-index: -1;
  pointer-events: none;
}
.feature-row__body .eyebrow { margin-bottom: 1.2rem; }
.feature-row__body h3 { font-size: var(--step-3); margin-bottom: 1.4rem; }
.feature-row__body p { color: var(--c-ink-soft); margin-bottom: 1.4rem; max-width: 52ch; }
.feature-row__list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0.6rem;
}
.feature-row__list li {
  display: flex;
  gap: 0.8rem;
  font-size: 0.96rem;
  color: var(--c-ink-soft);
}
.feature-row__list li::before {
  content: "-";
  color: var(--c-gold);
  flex-shrink: 0;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 980px) {
  .services { grid-template-columns: 1fr; gap: 2.5rem; }
  .service__visual { aspect-ratio: 16/10; }
  .about-split { grid-template-columns: 1fr; }
  .about-split__card {
    margin-left: 8%;
    margin-right: 8%;
    margin-top: -10%;
    margin-bottom: 0;
  }
  .botanical { width: 110px; height: 110px; }
  .botanical--top-left, .botanical--top-right { top: -20px; }
  .botanical--bottom-left, .botanical--bottom-right { bottom: -20px; }

  .intro, .feature-row, .feature-row--reverse, .package, .package--reverse, .contact-grid {
    grid-template-columns: 1fr;
  }
  .feature-row--reverse .feature-row__visual { order: 0; }
  .intro__visual--offset { margin-top: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--c-line); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
  .gallery--strip { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
  .gallery__item--w3 { grid-column: span 2; }
}
/* Hamburger menu - kicks in below 1280px. Desktop nav keeps the center links
   balanced between the wordmark and the reservation CTA; the phone lives in
   the mobile bar/footer instead of adding extra weight on the right side. */
@media (max-width: 1280px) {
  .nav-toggle {
    display: block;
    z-index: 41; /* above .nav__menu's z:40 so the X remains clickable while drawer is open */
  }
  .nav__cta { display: none; }
  .nav__menu {
    position: fixed;
    inset: 0;
    background: var(--c-cream);
    color: var(--c-ink);
    flex-direction: column;
    justify-content: center;
    gap: 1.8rem;
    padding: 4rem 2rem;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    z-index: 40;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__menu a { font-size: 1.1rem; letter-spacing: 0.3em; color: var(--c-ink); }

  /* When the drawer is open, force header content to ink so the logo and X
     stay visible against the cream drawer (default header color is ivory,
     which disappears on the cream background). */
  .site-header:has(.nav__menu.is-open) { color: var(--c-ink); }
  .site-header:has(.nav__menu.is-open) .nav-toggle { border-color: var(--c-ink); }
  /* Brand needs explicit z-index above the menu (40) too — otherwise the cream
     drawer paints over the logo and it disappears. */
  .site-header:has(.nav__menu.is-open) .brand {
    position: relative;
    z-index: 41;
  }
  /* Hide the desktop-only phone link when the drawer is open — it's redundant
     with the bottom mobile-bar and clutters the open-menu chrome. */
  .site-header:has(.nav__menu.is-open) .nav__tel { display: none; }

  /* Wordmark dosunięty do lewej krawędzi boxa, żeby logo wizualnie balansowało
     hamburger po prawej. Domyślny center/contain trzymał glif w środku 300/210px
     boxa, przez co optyczny środek "Glamour" zjeżdżał do środka navbara
     ("ani po lewej, ani po środku"). */
  .brand__logo {
    -webkit-mask-position: left center;
            mask-position: left center;
  }
  /* Brand jest flex-column z align-items: center — to centrowało zawartość
     wewnątrz brand boxa. Na mobile chcemy logo flush-left. */
  .brand { align-items: flex-start; }
}
@media (max-width: 720px) {
  /* .brand__logo width/height teraz fluid w bazowej regule (clamp + aspect-ratio).
     Override usunięty. */
  .form__row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gallery__item--w2, .gallery__item--w3 { grid-column: span 2; }
  .gallery__item--h2 { grid-row: span 1; }
  .hero__inner { padding-top: 5rem; padding-bottom: 6rem; }
  .hero__title-text { margin-bottom: 0.35em; }
  .hero__sub { margin: 1rem auto 1.4rem; }
  /* Hero text/rozmiary teraz w całości fluid (clamp) w bazowych regułach.
     Na mobile zostają tylko zmiany STRUKTURALNE które nie mogą być wyinterpolowane:
     - .hero__pre: display: block (eyebrow z dekoracyjnymi kreskami przechodzi w czysty tekst)
     - .hero__cta: flex-direction: column (przyciski stackują się zamiast obok siebie)
     - .hero__cta .btn: width-clamp (zwężony przycisk, żeby nie konkurował z logo)
     - .hero__address: dostosowane line-height/gap dla inline-flex pill stylu */
  .hero__pre {
    display: block;
    margin: 0.5rem auto 1.3rem;
  }
  .hero__pre::before, .hero__pre::after { display: none; }
  .hero__awards { gap: 0.7rem 1.3rem; }
  .features { grid-template-columns: 1fr; }
  .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.25rem;
  }
  .hero__cta .btn {
    width: min(64vw, 240px);
    justify-content: center;
    box-shadow: 0 6px 16px -12px rgba(184, 145, 80, 0.28);
  }
  /* Stretch (column default) rozciągał ten link na pełną szerokość kontenera,
     przez co tekst siedział wizualnie po lewej w szerokim boxie — align-self
     pozwala linkowi skurczyć się do zawartości i wycentrować w kolumnie. */
  .hero__cta .hero__cta-secondary {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* =============================================================
   D1: Czytelność v2 - promote ink-mute → ink-soft, body weight 400
   Override końcowy żeby łatwo było zrewertować.
   ============================================================= */

body {
  font-weight: 400;
}

:root {
  /* Zwiększona skala dla long-form */
  --step-0: clamp(1.0rem, 0.95rem + 0.2vw, 1.12rem);
}

/* Akapity w sekcjach - promote do ink-soft (#3a302a) */
.feature p,
.service p,
.offer-card p,
.package-card__list li,
.testimonial-card__text,
.section-head__lede,
.page-header__lede,
.about-split__card p,
.intro__body p,
.feature-row__body p {
  color: var(--c-ink-soft);
  line-height: 1.7;
}
.quote-block__body {
  color: var(--c-ink-soft);
}

/* Sekcje na ciemnym tle - podbita opacity */
.section--dark p,
.band p,
.site-footer p {
  opacity: 0.95;
}

.section--dark .section-head__lede {
  opacity: 0.92;
}

/* Listy w pakietach też dostają mocniejszy kolor */
.package__list li,
.feature-row__list li {
  color: var(--c-ink-soft);
}

/* === D7: Mobile pakiety - 3 karty stack pionowo === */
@media (max-width: 900px) {
  .packages {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .package-card {
    padding: 2rem 1.4rem;
  }
}

/* === D4: Hero CTA hierarchy === */

.btn--lg {
  /* .btn--lg jest używany tylko w hero (index.html: "Zarezerwuj termin"),
     więc można bezpiecznie wstawić fluid scaling tu, w bazie. Od 360px do 1100px:
     padding-block 0.58rem→1.2rem, padding-inline 0.9rem→2.4rem,
     font-size 0.62rem→step-0 (~1rem), letter-spacing 0.18em→0.3em. */
  padding: clamp(0.58rem, 0.28rem + 1.35vw, 1.2rem) clamp(0.9rem, 0.17rem + 3.25vw, 2.4rem);
  font-size: clamp(0.62rem, 0.44rem + 0.82vw, var(--step-0));
  letter-spacing: clamp(0.18em, calc(0.08em + 0.3vw), 0.3em);
  gap: clamp(0.5rem, 0.34rem + 0.45vw, 0.85rem);
  min-height: clamp(42px, 36px + 1.35vw, 60px);
  box-shadow: 0 14px 36px -8px rgba(184, 145, 80, 0.225);
}
.btn--lg:hover {
  box-shadow: 0 18px 44px -8px rgba(214, 181, 116, 0.275);
}

.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Sekundarny link CTA - płynnie 0.68rem→0.84rem, letter-spacing 0.1em→0.18em. */
  font-size: clamp(0.68rem, 0.6rem + 0.35vw, 0.84rem);
  letter-spacing: clamp(0.1em, calc(0.05em + 0.18vw), 0.18em);
  text-transform: uppercase;
  color: var(--c-dark-bone);
  text-shadow: 0 0 12px rgba(0,0,0,0.7);
  padding-block: clamp(0.25rem, 0.18rem + 0.18vw, 0.4rem);
  position: relative;
}
.hero__cta-secondary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}
.hero__cta-secondary:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hero__phone,
.hero__address {
  display: block;
  text-align: center;
  margin-top: 1.6rem;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--c-gold-hi);
  text-shadow: 0 0 14px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.6);
}
.hero__address {
  /* Adres pod CTA - płynnie 0.68rem→0.95rem, letter-spacing 0.08em→0.14em.
     Margin-top też skaluje, żeby nie odjeżdżał na małych ekranach. */
  font-size: clamp(0.68rem, 0.55rem + 0.58vw, 0.95rem);
  letter-spacing: clamp(0.08em, calc(0.04em + 0.15vw), 0.14em);
  margin-top: clamp(0.7rem, 0.5rem + 0.6vw, 1.15rem);
}
.hero__address-icon {
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: 0.5em;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.7)) drop-shadow(0 1px 2px rgba(0,0,0,0.55));
  transition: transform var(--transition);
}
.hero__address:hover .hero__address-icon {
  transform: translateY(-2px);
}
.hero__phone:hover,
.hero__address:hover {
  color: var(--c-ivory);
}

@media (max-width: 720px) {
  .hero__address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0.7rem auto 0;
    font-size: 0.68rem;
    line-height: 1.1;
    letter-spacing: 0.08em;
    gap: 0.35rem;
    opacity: 0.9;
  }
  .hero__address-icon {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-right: 0;
    vertical-align: middle;
  }
}
.hero__phone-icon {
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: 0.45em;
  color: var(--c-sage);
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.7)) drop-shadow(0 1px 2px rgba(0,0,0,0.55));
  transition: color var(--transition);
}
.hero__phone:hover .hero__phone-icon {
  color: var(--c-ivory);
}

/* === D3: Telefon zachowany w markup, ukryty w desktop nav dla balansu === */
.nav__tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-hi);
  padding: 0.6rem 0.8rem;
  font-weight: 500;
  transition: color var(--transition);
}
.nav__tel svg {
  width: 16px;
  height: 16px;
}
.nav__tel:hover {
  color: var(--c-ivory);
}

/* Desktop ≥ 1281px - menu wyciągamy z flex-flow i pozycjonujemy absolutnie
   na środku navbara, żeby CTA po prawej nie spychało linków z centrum. */
@media (min-width: 1281px) {
  .nav__menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Variant: site-header.is-scrolled (jasny stan) i site-header--light */
.site-header.is-scrolled .nav__tel,
.site-header--light .nav__tel {
  color: var(--c-gold-deep);
}
.site-header.is-scrolled .nav__tel:hover,
.site-header--light .nav__tel:hover {
  color: var(--c-ink);
}

/* === D2: Mobile sticky bottom-bar === */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: 60px;
  background: rgba(249, 242, 227, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-gold-soft);
  transition: transform 0.4s var(--transition);
}
.mobile-bar.is-hidden {
  transform: translateY(100%);
}

.mobile-bar__call,
.mobile-bar__write {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex: 1;
  height: 100%;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--transition);
}

.mobile-bar__call {
  color: var(--c-ink);
}
.mobile-bar__call svg {
  width: 18px;
  height: 18px;
  color: var(--c-gold-deep);
  flex-shrink: 0;
}
/* Stacked two-line CTA: "Zadzwoń" above the phone number, both centered,
   number stays on its own line (no wrap into the Napisz section). */
.mobile-bar__call-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.mobile-bar__label {
  display: inline;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
}
.mobile-bar__num {
  display: inline;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
}

.mobile-bar__write {
  background: var(--c-gold);
  color: var(--c-ink);
}
.mobile-bar__write:hover {
  background: var(--c-gold-deep);
  color: var(--c-ivory);
}

/* Mobile ≤1280px - pokaż. Skoordynowane z hamburgerem, żeby telefon był
   szybkim kontaktem na mniejszych ekranach bez rozpychania headera. */
@media (max-width: 1280px) {
  .mobile-bar { display: flex; }
  body:not(.is-contact) { padding-bottom: 60px; }
}

/* Ukryj na kontakt.html (ma formularz) */
body.is-contact .mobile-bar {
  display: none !important;
}

/* === D5: Sticky offer-tabs (oferta.html) === */
.offer-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249, 242, 227, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line-cream);
  border-top: 1px solid var(--c-line-cream);
}
.offer-tabs .wrap {
  display: flex;
  justify-content: center;
}
.offer-tabs ul {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.offer-tabs ul::-webkit-scrollbar { display: none; }
.offer-tabs li {
  scroll-snap-align: center;
  flex-shrink: 0;
}
.offer-tabs a {
  display: inline-block;
  padding: 1rem 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  position: relative;
  white-space: nowrap;
  transition: color var(--transition);
}
.offer-tabs a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: center;
}
.offer-tabs a:hover {
  color: var(--c-ink);
}
.offer-tabs a.is-active {
  color: var(--c-gold-deep);
}
.offer-tabs a.is-active::after {
  transform: scaleX(1);
}

/* Sekcje muszą mieć offset żeby tytuł nie wpadał pod sticky tabs */
#wesela, #komunie, #chrzciny, #urodziny, #konferencje {
  scroll-margin-top: 90px;
}

/* Mobile - padding boczny w scrollable tabs */
@media (max-width: 700px) {
  .offer-tabs ul {
    padding-inline: var(--gutter);
  }
}

/* === Hero "Glamour" zostaje na Cormorant (explicit override po zmianie --ff-serif) === */
.hero__title em {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
}

/* === Hero h1 "Sala Weselno-Bankietowa" na Crimson Pro (em "Glamour" zostaje na Cormorant) === */
.hero__title {
  font-family: var(--ff-serif);
}

/* === Ujednolicenie czcionki numerów telefonów - Outfit sans z lining figures === */
.hero__phone,
.hero__address,
.band__phones,
.band__phones a {
  font-family: var(--ff-body);
}

/* Lining + tabular figures (gdyby font miał OSF as default) */
.hero__phone,
.hero__address,
.band__phones a,
.nav__tel,
.mobile-bar__call,
.footer-grid a[href^="tel:"] {
  font-variant-numeric: lining-nums tabular-nums;
}

/* === Wszystkie nagłówki H1-H4 na Crimson Pro (--ff-serif), poza "Glamour" === */
.page-header h1,
.band h2,
.package-card__title {
  font-family: var(--ff-serif);
}

/* "Glamour" pozostaje na Cormorant - explicit override: */
.hero__title em {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
}

/* Karta package-card rozciagnieta na cala szerokosc gridu .packages.
   Uzywana m.in. na stronie 404, gdzie czwarta karta (Kontakt) wisi sama
   w drugim wierszu - rozciagnieta wyglada celowo, nie jak pomylka layoutu. */
.package-card--span-full {
  grid-column: 1 / -1;
}

/* =============================================================
   Navbar transition gating (desktop ↔ mobile @ 1280px)
   Współpracuje z js/main.js (sekcja 11), który dodaje na <html>
   klasy .is-resizing i .is-packing-to-mobile.
   ============================================================= */

/* (1) Tłumienie domyślnej tranzycji .nav__menu na czas resize.
   Bez tego, gdy okno crossuje breakpoint, transform animuje się od
   0 do translateX(100%) — i wygląda to jak "przelot z lewej do prawej". */
html.is-resizing:not(.is-packing-to-mobile) .nav__menu {
  transition: none !important;
}

/* (2) Animacja "pakowania w prawo" przy desktop → mobile.
   Klasa .is-packing-to-mobile żyje ~320ms (kontrolowane z JS); w tym czasie:
   - menu animuje fade-out + translateX w prawo
   - CTA, jeśli jest widoczne, robi krótki fade-out
   - hamburger fade-in pojawia się po prawej, tam gdzie przejmuje sterowanie.
   Override mobile reguł (position: fixed) jest celowy —
   utrzymujemy desktop-like center przez tę krótką chwilę, żeby animacja
   była widoczna. Po klasie naturalne mobile rules przejmują kontrolę. */
@keyframes nav-pack-menu-right {
  from { opacity: 1; transform: translate(-50%, -50%) translateX(0); }
  to   { opacity: 0; transform: translate(-50%, -50%) translateX(46px); }
}
@keyframes nav-pack-action-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(22px); }
}
@keyframes nav-hamburger-appear {
  from { opacity: 0; transform: translateY(-50%) scale(0.88); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

html.is-packing-to-mobile .site-header.is-scrolled .nav__cta,
html.is-packing-to-mobile .site-header--light .nav__cta {
  display: inline-flex;
  animation: nav-pack-action-right 240ms ease-out forwards;
  pointer-events: none;
}
html.is-packing-to-mobile .nav__menu {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: max-content;
  height: auto;
  background: transparent;
  color: inherit;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
  padding: 0;
  z-index: 1;
  animation: nav-pack-menu-right 300ms ease-out forwards;
  pointer-events: none;
}
html.is-packing-to-mobile .nav__menu a {
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  color: inherit;
}
html.is-packing-to-mobile .nav-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  animation: nav-hamburger-appear 240ms ease-out 90ms both;
}

/* prefers-reduced-motion: użytkownicy z preferencją redukcji ruchu
   nie dostają animacji "pakowania" — od razu czysty snap. */
@media (prefers-reduced-motion: reduce) {
  html.is-packing-to-mobile .nav__cta,
  html.is-packing-to-mobile .nav__menu,
  html.is-packing-to-mobile .nav-toggle {
    animation: none !important;
  }
}