/*
Theme Name: Kasiawlesie
Theme URI: https://kasiawlesie.pl/
Author: you.rise
Author URI: https://yourise.pl/
Description: Motyw uszyty na miarę dla pracowni florystycznej Kasiawlesie w Łodzi. Siedem szablonów podstron plus polityka prywatności, wspólny header/footer, treści redagowane przez pola ACF, bez zależności od zewnętrznych bibliotek JS.
Version: 1.69.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kasiawlesie
Tags: custom-theme, florist, one-column
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Paleta marki kasiawlesie ──────────────────────────────────────────────
   Wartości podane przez klientkę: turkus #35645F (główny), ciemna zieleń
   #314835, brąz #7B624B, ciepły krem #EFEDE6, miękka czerń #1D1D1D.

   Turkus w oryginale służy do wypełnień — jako tekst na ciemnym tle daje
   kontrast 2,5:1, czyli poniżej progu czytelności 4,5:1. Dlatego do tekstu
   używamy tego samego odcienia (174°) rozjaśnionego do #8EC3BD, który
   osiąga 8,6:1 — praktycznie tyle, co wcześniejsze złoto.

   Trójki *-rgb istnieją po to, żeby półprzezroczyste warianty brały kolor
   z jednego miejsca: rgb(var(--turkus-jasny-rgb) / 0.4).
   ────────────────────────────────────────────────────────────────────── */
:root {
  --czern: #1D1D1D;
  --czern-rgb: 29 29 29;
  --czern2: #232624;
  --turkus: #35645F;
  --turkus-rgb: 53 100 95;
  --turkus-jasny: #8EC3BD;
  --turkus-jasny-rgb: 142 195 189;
  --zielen: #314835;
  --zielen-rgb: 49 72 53;
  --turkus-ciemny: #1E2F2D;
  --turkus-ciemny-rgb: 30 47 45;
  --braz: #7B624B;
  --braz-rgb: 123 98 75;
  /* Podpis wykonawcy w stopce — barwy i krój marki you.rise,
     odczytane z yourise.pl: bursztyn #E9A020 i Syne w grubości 800. */
  --yourise-kolor: #E9A020;
  --yourise-font: 'Syne', var(--sans);
  /* Jeden jasny kolor marki: len. Ten sam odcień jest tłem sekcji portfolio
     i kolorem nagłówków na ciemnym tle - wcześniej obok siebie żyły trzy
     prawie białe (#EFEDE6, #E9E7DF i czysta biel). */
  --krem: #EEE9DF;
  /* Tekst biegnący: jasny, ciepły i neutralny. Wcześniej cały tekst był
     półprzezroczystym jasnym turkusem - na czerni czytał się jako przygaszona
     szarozieleń, a turkus, będąc wszędzie, przestawał być akcentem. Teraz
     turkus zostaje dla wyróżnień, a tekst jest po prostu jasny. */
  --tekst-rgb: 238 233 223;
  --a-tekst: 0.92;
  --a-tekst-2: 0.74;
  --biel: #FAFAF7;
  --text-light: #3A3A38;
  --text-muted: #7A7A75;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: rgb(var(--tekst-rgb) / var(--a-tekst)); background: var(--czern); font-weight: 300; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 72px;
  background: rgb(var(--czern-rgb) / 0.93); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgb(var(--turkus-jasny-rgb) / 0), rgb(var(--turkus-jasny-rgb) / 0.3), rgb(var(--turkus-jasny-rgb) / 0)) 1;
}
/* Marka pisana małą literą — tak zapisuje ją klientka we wszystkich materiałach. */
.nav-marka { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.nav-logo {
  font-family: var(--serif); font-size: 24px; font-weight: 300; letter-spacing: 0.06em;
  color: var(--krem); text-decoration: none;
}
.nav-logo span { font-style: italic; color: var(--turkus-jasny); }
.nav-podpis {
  font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--turkus-jasny); white-space: nowrap;
}
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links > li > a, .nav-rozwin { white-space: nowrap; }
.nav-links a { font-size: 12px; letter-spacing: 0.1em; color: var(--turkus-jasny); text-decoration: none; text-transform: uppercase; opacity: 0.6; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a { opacity: 1; color: var(--krem); }

/* Hamburger — widoczny tylko na mobile */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--turkus-jasny); transition: transform 0.25s, opacity 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-cta {
  background: transparent; border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.4);
  color: var(--turkus-jasny); padding: 10px 24px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.25s; text-decoration: none;
}
.nav-cta:hover { background: var(--turkus-jasny); color: var(--czern); border-color: var(--turkus-jasny); }

/* HERO */
.hero {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Górny odstęp musi minąć pasek nawigacji (72 px), bo treść jest dosunięta
     do dołu: przy długim tytule i niskim oknie - telefon w poziomie, niższy
     laptop - pierwsza linia wjeżdżała pod menu i ucinało ją `overflow`. */
  padding: 104px 0 80px 0;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  filter: brightness(0.8) contrast(1.1) saturate(0.9);
}
.hero-botanical {
  position: absolute; inset: 0; z-index: 0;
  background: var(--czern);
  overflow: hidden;
}
.hero-botanical svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.12;
}
.hero-video-note {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); white-space: nowrap; pointer-events: none;
}
/* Ten gradient powstał pod ciemny rysunek botaniczny i przy nim wystarczał.
   Pod zdjęciem przestał: zmierzone na wgranym tle, pod napisami trafiają się
   piksele niemal białe (rgb 238,239,230), a przy dawnych wartościach kontrast
   spadał do 1.07. Progi 25% i 40% są dobrane tak, żeby krycie dochodziło do
   0.8 dokładnie tam, gdzie zaczyna się tekst, a góra kadru została jasna. */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgb(var(--czern-rgb) / 0.50) 0%,
    rgb(var(--czern-rgb) / 0.70) 25%,
    rgb(var(--czern-rgb) / 0.82) 40%,
    rgb(var(--czern-rgb) / 0.90) 100%
  );
}
/* Szerzej niż poprzednio: nagłówek „Dekoracje ślubne i scenografia wydarzeń"
   jest dwa razy dłuższy od dawnego i przy 760 px łamał się na pięć linii. */
.hero-inner { position: relative; z-index: 2; max-width: 980px; padding: 0 64px; }
.hero-tag {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--turkus-jasny); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; opacity: 0.7;
}
.hero-tag::before { content: ''; width: 32px; height: 1px; background: var(--turkus-jasny); opacity: 0.6; }
.hero h1 {
  font-family: var(--serif); font-size: clamp(40px, 5.6vw, 82px); font-weight: 300; line-height: 1.06;
  color: var(--krem); letter-spacing: -0.02em; margin-bottom: 28px; text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--turkus-jasny); }
.hero-sub {
  font-size: 15px; font-weight: 300; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
  line-height: 1.7; max-width: 420px; margin-bottom: 48px;
}
.hero-actions { display: flex; gap: 20px; flex-wrap: wrap; }
.btn-primary {
  background: var(--turkus); color: var(--krem);
  padding: 15px 36px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.25s;
}
.btn-primary:hover { background: var(--turkus-jasny); color: var(--czern); }
.btn-ghost {
  background: transparent; color: var(--turkus-jasny);
  padding: 15px 36px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.3); cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.25s;
}
.btn-ghost:hover { border-color: var(--turkus-jasny); color: var(--krem); }
.hero-stats {
  position: absolute; right: 64px; bottom: 80px; z-index: 2;
  display: flex; flex-direction: column; gap: 28px; align-items: flex-end;
}
.stat-item { text-align: right; }
a.stat-num { text-decoration: none; transition: color 0.2s; }
a.stat-num:hover { color: var(--krem); }
.stat-num { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--krem); display: block; line-height: 1; }
.stat-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-top: 5px; display: block; }

/* SECTIONS */
section { padding: 100px 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.section-tag {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--turkus-jasny); margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
}
.section-tag::before { content: ''; width: 24px; height: 1px; background: rgb(var(--turkus-jasny-rgb) / 0.35); }

/* O KASI — ciemna */
.o-kasi { background: var(--czern2); }
.o-kasi-inner { display: grid; grid-template-columns: 4fr 6fr; gap: 80px; align-items: center; }

/* Botaniczny placeholder zdjęcia */
.o-kasi-img {
  aspect-ratio: 3/4; position: relative; overflow: hidden;
  background: var(--turkus-ciemny);
}
.o-kasi-img svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.25;
}
.o-kasi-img-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.o-kasi-img-label span {
  font-family: var(--serif); font-size: 16px; font-style: italic;
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); letter-spacing: 0.05em;
}
.o-kasi-img::after {
  content: ''; position: absolute; bottom: -16px; right: -16px;
  width: 80px; height: 80px; border: 1px solid rgb(var(--zielen-rgb) / 0.6); pointer-events: none;
}
.o-kasi-text h2 {
  font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); font-weight: 300; line-height: 1.15;
  color: var(--krem); margin-bottom: 28px;
}
.o-kasi-text h2 em { font-style: italic; color: var(--turkus-jasny); }
.o-kasi-text p { font-size: 15px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-bottom: 18px; }
.signature { font-family: var(--serif); font-size: 20px; font-style: italic; color: var(--turkus-jasny); margin-top: 32px; }

/* USŁUGI — ciemna zieleń */
.uslugi { background: var(--turkus-ciemny); }
.uslugi h2 {
  font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); font-weight: 300;
  color: var(--krem); margin-bottom: 64px; line-height: 1.15;
}
.uslugi h2 em { font-style: italic; color: var(--turkus-jasny); }
.uslugi-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.usluga-card {
  padding: 48px 32px; border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.12);
  border-right: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s, background 0.3s;
}
.usluga-card:last-child { border-right: none; }
/* Wariant trzykolumnowy — używany na stronie 404, gdzie kart jest sześć. */
.uslugi-grid--trzy { grid-template-columns: repeat(3, 1fr); }
.uslugi-grid--trzy .usluga-card:nth-child(3n) { border-right: none; }
/* Karta jako link — używane na stronie głównej, żeby usługi linkowały do podstron */
a.usluga-card { display: block; text-decoration: none; color: inherit; }
a.usluga-card h3 { transition: color 0.25s; }
a.usluga-card:hover h3 { color: var(--turkus-jasny); }
.usluga-card.visible { opacity: 1; transform: translateY(0); }
.usluga-card:hover { background: rgb(var(--turkus-jasny-rgb) / 0.04); }
.usluga-num { font-family: var(--serif); font-size: 13px; color: var(--turkus-jasny); letter-spacing: 0.1em; margin-bottom: 24px; display: block; }
.usluga-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--krem); margin-bottom: 16px; line-height: 1.3; }
.usluga-card p { font-size: 13px; line-height: 1.75; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }
.usluga-tag { display: inline-block; margin-top: 24px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turkus-jasny); border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.2); padding-bottom: 2px; }

/* REALIZACJE — karuzela, czarne tło */
.realizacje { background: var(--czern); padding: 100px 0 0; }
.realizacje-header { padding: 0 48px; margin-bottom: 48px; max-width: 1160px; margin-left: auto; margin-right: auto; }
.realizacje-header h2 {
  font-family: var(--serif); font-size: clamp(28px, 3.5vw, 44px); font-weight: 300;
  color: var(--krem); margin-bottom: 8px; line-height: 1.2;
}
.realizacje-header h2 em { font-style: italic; color: var(--turkus-jasny); }
.realizacje-sub { font-size: 13px; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); letter-spacing: 0.05em; }

.karuzela-wrapper { overflow: hidden; position: relative; padding-bottom: 80px; }
.karuzela-track {
  display: flex; gap: 3px;
  animation: karuzela-scroll 32s linear infinite;
  width: max-content;
  cursor: grab;
}
.karuzela-track:active { cursor: grabbing; }
.karuzela-track:hover { animation-play-state: paused; }

@keyframes karuzela-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.karta {
  width: 360px; flex-shrink: 0; position: relative; overflow: hidden;
  aspect-ratio: 3/4;
}
.karta img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.karta:hover img { transform: scale(1.04); }
.karta-placeholder {
  width: 100%; height: 100%;
  background: var(--turkus-ciemny);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  position: relative; overflow: hidden;
}
.karta-placeholder svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.15; }
.karta-placeholder-text { position: relative; z-index: 1; text-align: center; }
.karta-placeholder-cat { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); margin-bottom: 8px; display: block; }
.karta-placeholder-title { font-family: var(--serif); font-size: 20px; font-style: italic; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.karta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--czern-rgb) / 0.85) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
}
.karta:hover .karta-overlay { opacity: 1; }
.karta-cat { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--turkus-jasny); margin-bottom: 6px; display: block; }
.karta-title { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--krem); font-style: italic; }

/* WYRÓŻNIKI */
.wyrózniki { background: var(--turkus-ciemny); padding: 64px 0; }
/* Bez własnego ograniczenia — sekcja trzyma tę samą szerokość co reszta strony. */
.wyroz-inner { margin: 0 auto; }
.wyroz-title {
  font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); font-weight: 300;
  color: var(--krem); line-height: 1.15; margin-bottom: 40px;
}
.wyroz-title em { font-style: italic; }
.wyroz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wyroz-item {
  padding: 28px 32px; border-radius: 8px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s, transform 0.6s, background 0.3s;
  cursor: default;
}
.wyroz-item:hover { background: rgb(var(--turkus-jasny-rgb) / 0.06); }
.wyroz-item.visible { opacity: 1; transform: translateY(0); }
.wyroz-accent { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--turkus-jasny); margin-bottom: 16px; display: block; }
.wyroz-item h3 { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--krem); margin-bottom: 12px; line-height: 1.3; }
.wyroz-item h3 em { font-style: italic; }
.wyroz-item h3 .star { color: var(--turkus-jasny); font-style: normal; }
.wyroz-item p { font-size: 13px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }

/* OPINIE — ciemne tło, karty w stylu Google */
.opinie { background: var(--czern2); }
.opinie h2 {
  font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); font-weight: 300;
  color: var(--krem); margin-bottom: 56px; line-height: 1.15;
}
.opinie h2 em { font-style: italic; color: var(--turkus-jasny); }
.opinie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.opinia {
  background: rgb(var(--zielen-rgb) / 0.30); border-radius: 12px; padding: 36px 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
  opacity: 0; transform: translateY(16px); transition: opacity 0.6s, transform 0.6s;
}
.opinia.visible { opacity: 1; transform: translateY(0); }
.opinia-top { margin-bottom: 20px; }
.opinie-wszystkie { display: inline-block; margin-top: 34px; }
.stars { color: var(--turkus-jasny); font-size: 15px; letter-spacing: 2px; margin-bottom: 18px; }
.opinia blockquote {
  font-family: var(--serif); font-size: 16px; font-weight: 300; font-style: italic;
  line-height: 1.75; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
}
/* Cudzysłowy dokleja arkusz, a nie treść — dzięki temu opinia wklejona
   z Google zawsze wygląda tak samo, niezależnie od tego, czy klientka
   przepisała je razem z tekstem. */
.opinia blockquote::before { content: '\201E'; }
.opinia blockquote::after  { content: '\201D'; }
.opinia-footer { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08); }
.opinia-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--krem);
  background: var(--turkus);
}
/* Kolor kółka wynika z pozycji opinii, nie z atrybutu w treści — dzięki temu
   podmiana opinii w panelu nie zostawia awatara w kolorze poprzedniej. */
.opinie-grid .opinia:nth-child(3n + 2) .opinia-avatar { background: var(--zielen); }
.opinie-grid .opinia:nth-child(3n + 3) .opinia-avatar { background: var(--braz); }
.opinia-meta { display: flex; flex-direction: column; gap: 3px; }
.opinia-imie { font-size: 13px; font-weight: 400; color: var(--krem); }
.opinia-zrodlo { font-size: 11px; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); letter-spacing: 0.05em; }

/* CTA */
/* Blok domykający podstrony — jedyne miejsce, gdzie kolor główny marki
   występuje jako pełna powierzchnia, a nie jako akcent. Tekst i przyciski
   są tu odwrócone: krem na turkusie daje 5,7:1, biel 6,7:1. */
/* Gradient pionowy: górna krawędź ma jeden kolor (turkus) na całej
   szerokości, więc sekcja z mgłą nad nią może się w niego płynnie wtopić. */
.cta-section {
  background: linear-gradient(180deg, var(--turkus) 0%, var(--zielen) 100%);
  text-align: center; padding: 120px 48px;
}
.cta-section .section-tag { justify-content: center; color: rgb(var(--tekst-rgb) / 0.95); }
.cta-section .section-tag::before { background: rgb(var(--tekst-rgb) / 0.45); }
.cta-section h2 {
  font-family: var(--serif); font-size: clamp(42px, 6vw, 68px); font-weight: 300;
  color: var(--krem); margin: 0 auto 24px; max-width: 680px; line-height: 1.1;
}
.cta-section h2 em { font-style: italic; color: var(--krem); }
.cta-section p { font-size: 15px; color: rgb(var(--tekst-rgb) / 0.94); margin-bottom: 48px; line-height: 1.7; }
/* Przyciski odwrócone — na turkusie wypełnienie turkusem byłoby niewidoczne. */
.cta-section .btn-primary { background: var(--krem); color: var(--turkus); }
.cta-section .btn-primary:hover { background: #F6F3EC; color: var(--turkus); }
.cta-section .btn-ghost { color: var(--krem); border-color: rgb(var(--tekst-rgb) / 0.45); }
.cta-section .btn-ghost:hover { border-color: var(--krem); color: #F6F3EC; }
.cta-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   LASY W SZKLE — siatka modeli
   ============================================================ */
.lasy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgb(var(--turkus-jasny-rgb) / 0.1);
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.1);
}
.las-karta { background: var(--czern); display: flex; flex-direction: column; }
.las-foto { aspect-ratio: 3 / 4; overflow: hidden; }
.las-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bez zdjęcia karta nie zapada się — trzyma proporcję jako pusta płaszczyzna. */
.las-foto--pusta {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, rgb(var(--zielen-rgb) / 0.35), rgb(var(--turkus-ciemny-rgb) / 0.6));
}
.las-tresc { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.las-nazwa { font-family: var(--serif); font-size: 23px; font-weight: 300; color: var(--krem); line-height: 1.25; }
.las-cena {
  font-size: 13px; letter-spacing: 0.08em; color: var(--turkus-jasny);
  font-variant-numeric: tabular-nums;
}
.las-wymiary { font-size: 12px; letter-spacing: 0.04em; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.las-opis { font-size: 13.5px; line-height: 1.7; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }
.las-tresc .link-more { margin-top: auto; padding-top: 14px; }

.forma-odnosniki { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; }

@media (max-width: 900px) { .lasy-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lasy-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FORMY POŻEGNANIA — tabele progów cenowych
   ============================================================ */
.forma { margin-bottom: 56px; max-width: 760px; }
.forma:last-of-type { margin-bottom: 40px; }
.forma-tytul {
  font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--krem);
  margin-bottom: 14px; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
}
.forma-cena {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em;
  color: var(--turkus-jasny); white-space: nowrap;
}
.forma p { font-size: 15px; line-height: 1.8; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }
.forma .tabela-cen-owijka { margin-top: 24px; }

/* Wąskie ekrany: tabela dostaje własny pasek przewijania zamiast rozpychać stronę. */
.tabela-cen-owijka { overflow-x: auto; }
.tabela-cen {
  border-collapse: collapse; width: 100%; max-width: 420px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.tabela-cen th, .tabela-cen td { text-align: left; padding: 11px 18px 11px 0; }
/* Kolumna z ceną do prawej krawędzi. Wyrównana do lewej zostawiała między
   rozmiarem a kwotą przypadkową dziurę i rozsypywała cyfry — przy prawej
   krawędzi (i cyfrach o stałej szerokości, ustawionych wyżej) kwoty układają
   się w słupek, a wzrok porównuje je jednym ruchem. */
.tabela-cen th:last-child, .tabela-cen td:last-child { text-align: right; padding-right: 0; }
.tabela-cen thead th {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--turkus-jasny);
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.2);
}
/* Akcent na kwocie, nie na rozmiarze — tak samo jak w liście dodatków tuż
   pod tabelą, gdzie jasny jest koszt, a przygaszona nazwa pozycji. Wcześniej
   te dwa sąsiadujące bloki miały odwrócone akcenty i czytały się jak dwa
   różne cenniki. */
.tabela-cen tbody th {
  font-weight: 400; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
}
.tabela-cen tbody td {
  color: var(--krem); white-space: nowrap;
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
}
.tabela-cen tbody tr:last-child th, .tabela-cen tbody tr:last-child td { border-bottom: none; }

.forma-tytul--dodatki { margin-top: 8px; }
.lista-dodatkow { list-style: none; margin: 0 0 18px; padding: 0; max-width: 560px; }
.lista-dodatkow li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  padding: 12px 0; border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
  font-size: 14.5px;
}
.dodatek-nazwa { color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
/* margin-left: auto, a nie samo justify-content — przy zawinięciu na wąskim
   ekranie pozycja staje się osobnym wierszem i bez tego cena wracała pod
   nazwę do lewej krawędzi. Wtedy w jednej liście część kwot stała po prawej,
   a część po lewej. Teraz zawsze przy prawej krawędzi. */
.dodatek-cena { color: var(--krem); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.dodatki-uwaga { font-size: 13.5px; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }

/* Pary pól obok siebie — telefon i e-mail zajmują jeden wiersz. */
.pole-para { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.pole-podpowiedz--para { margin: -14px 0 22px; }
.pole-opcjonalne { text-transform: none; letter-spacing: 0; opacity: 0.55; font-size: 11px; }
/* Blok pól wariantu. Ukryty atrybutem `hidden`, a jego pola są wyłączone,
   więc nie trafiają do zgłoszenia ani do walidacji. */
.pola-warunkowe[hidden] { display: none; }
.pola-warunkowe {
  border-left: 2px solid rgb(var(--turkus-jasny-rgb) / 0.18);
  padding-left: 20px; margin-bottom: 4px;
}
@media (max-width: 600px) {
  .pole-para { grid-template-columns: 1fr; gap: 0; }
  .pole-podpowiedz--para { margin-top: -14px; }
  .pola-warunkowe { padding-left: 14px; }
}

/* Dwie ścieżki zapytania nad danymi kontaktowymi na stronie głównej. */
.sciezki { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.sciezki li { display: flex; flex-direction: column; gap: 5px; padding-left: 16px; border-left: 2px solid rgb(var(--turkus-jasny-rgb) / 0.2); }
.sciezki strong { font-weight: 400; color: var(--krem); font-size: 15px; }
.sciezki span { font-size: 14px; color: var(--turkus-jasny); line-height: 1.6; }
.sciezki .link-more { margin-top: 4px; align-self: flex-start; }

/* FOOTER */
footer { background: var(--czern); padding: 52px 0 28px; border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08); }
.footer-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1.4fr 1.6fr 1fr; gap: 48px;
}
.footer-brand .nav-logo { display: inline-block; margin-bottom: 14px; }
.footer-brand .nav-marka { display: block; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); max-width: 260px; }
.footer-col-title { font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--turkus-jasny); margin-bottom: 14px; }
.footer-col p, .footer-col a { font-size: 13px; color: rgb(var(--tekst-rgb) / var(--a-tekst)); line-height: 1.95; text-decoration: none; display: block; }
.footer-col a:hover { color: var(--turkus-jasny); }
/* Oferta w dwóch słupkach — dziewięć pozycji jedna pod drugą rozciągało stopkę. */
.footer-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.footer-adres { margin-top: 12px; line-height: 1.7; }
.footer-adres span { color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }

.footer-bottom {
  max-width: 1160px; margin: 32px auto 0; padding: 20px 48px 0;
  border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px 24px;
}
.footer-bottom p { font-size: 11px; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.footer-prawne a { color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.footer-prawne a:hover { color: var(--turkus-jasny); }

/* Podpis wykonawcy — barwa i krój sterowane zmiennymi --yourise-* w :root. */
/* Selektor celowo z rodzicem — ogólna reguła .footer-prawne a ma wyższą
   specyficzność i bez tego przemalowałaby podpis na turkus. */
.footer-prawne .podpis-yourise {
  color: var(--yourise-kolor); font-family: var(--yourise-font);
  font-weight: 800; letter-spacing: -0.01em; text-decoration: none;
  border-bottom: 1px solid rgb(233 160 32 / 0.3);
  padding-bottom: 1px; transition: border-color 0.2s, opacity 0.2s;
}
.footer-prawne .podpis-yourise:hover { color: var(--yourise-kolor); border-bottom-color: currentColor; opacity: 0.85; }

.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Pasek robi się ciasny, zanim wejdzie hamburger: pięć pozycji i dwie
   strzałki. Podpis pod logo ustępuje pierwszy, bo powtarza się w stopce
   i niczego nie nawiguje. */
@media (max-width: 1150px) {
  .nav-podpis { display: none; }
  .nav-links { gap: 20px; }
  nav { padding: 0 32px; }
}

@media (max-width: 900px) {
  nav { padding: 0 24px; }
  .nav-toggle { display: flex; }
  .nav-cta { margin-left: auto; margin-right: 14px; padding: 8px 16px; font-size: 11px; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgb(var(--czern-rgb) / 0.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.14);
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  }
  .nav-links.open { max-height: 80vh; }
  .nav-links > li { border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.07); }
  .nav-links a { display: block; padding: 16px 24px; font-size: 13px; opacity: 0.85; }
  .hero-inner { padding: 0 28px; }
  .hero-stats { right: 24px; bottom: 56px; }
  .container { padding: 0 28px; }
  .o-kasi-inner { grid-template-columns: 1fr; gap: 40px; }
  .uslugi-grid { grid-template-columns: 1fr 1fr; }
  .wyroz-grid { grid-template-columns: 1fr; gap: 32px; }
  .opinie-grid { grid-template-columns: 1fr; }
  /* Stopka na telefonie: mniej powietrza niż na desktopie. Przy szerokości
     kolumny 1160 px odstępy robią porządek, na 375 px kosztują ekran
     przewijania nad treścią, która i tak jest drugorzędna. */
  footer { padding: 36px 0 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  /* Na telefonie oferta zostaje w dwóch słupkach — inaczej stopka rośnie
     do kilku ekranów przewijania. Tu jednak nie siatka, tylko łamanie na
     kolumny: w siatce pozycja łamiąca się na dwa wiersze („Florystyka
     pożegnalna") podnosiła cały rząd i zostawiała pustkę obok sąsiada.
     Przy kolumnach każda pozycja zajmuje tylko własną wysokość. */
  .footer-lista { display: block; columns: 2; column-gap: 18px; }
  .footer-lista a { break-inside: avoid; }
  .footer-col p, .footer-col a { line-height: 1.8; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; margin-top: 22px; padding-top: 16px; }
  /* Wiersz prawny na telefonie: dwie linijki zamiast jednej łamiącej się
     w przypadkowym miejscu — inaczej podpis „you.rise" spadał sam pod
     słowo „przez". Kropka rozdzielająca ma sens tylko w jednej linii. */
  .footer-prawne { display: flex; flex-direction: column; gap: 6px; }
  .footer-kropka { display: none; }
  .footer-podpis { white-space: nowrap; }
  .realizacje-header { padding: 0 28px; }
}
@media (max-width: 600px) {
  /* Podpis pod logo wypychałby przycisk z numerem — na wąskim ekranie
     sama nazwa marki wystarczy, a opis i tak powtarza się w stopce. */
  .nav-podpis { display: none; }
  .hero h1 { font-size: 44px; }
  .hero-stats { display: none; }
  .uslugi-grid { grid-template-columns: 1fr; }
  .karta { width: 280px; }
  section { padding: 72px 0; }
}

/* ============================================================
   KOMPONENTY PODSTRON
   ============================================================ */

/* Hero podstrony. Zdjęcie tła wchodzi z panelu — kadruje przeglądarka,
   więc proporcja wgranego pliku nie ma znaczenia. Przyciemnienie to osobna
   warstwa, nie filtr: tekst pozostaje czytelny i na jasnym, i na ciemnym
   kadrze. Bez zdjęcia zostaje sam gradient. */
.hero-foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-foto-cien {
  position: absolute; inset: 0; display: block;
  /* Mgła w kolorze lasu zamiast czarnej ramki. Gęstość nie jest wyborem
     estetycznym, tylko wynikiem pomiaru na wszystkich zdjęciach nagłówków:
     w pasie tekstu potrzeba 0.82, żeby najjaśniejszy piksel pod literami dał
     kontrast ponad 5. Rozmycie prawie nie pomaga w kontraście (7 -> 18 px
     daje +0.3), więc jest delikatne - ma tworzyć wrażenie mgły, nie zasłonę.
     Nad tekstem mgła rzednie, żeby górę kadru było widać. */
  background: linear-gradient(180deg,
    rgb(var(--turkus-ciemny-rgb) / 0.46) 0%,
    rgb(var(--turkus-ciemny-rgb) / 0.70) 10%,
    rgb(var(--turkus-ciemny-rgb) / 0.82) 16%,
    rgb(var(--turkus-ciemny-rgb) / 0.82) 100%);
  /* Po prawej, gdzie nie ma liter, maska rozrzedza mgłę i z mgły wyłania
     się ostrzejszy las. Do 72% szerokości mgła ma pełną gęstość. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgb(0 0 0 / 0.5) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgb(0 0 0 / 0.5) 100%);
}
/* Dół nagłówka przechodzi w tło następnej sekcji - osobną warstwą, żeby
   maska mgły nie zostawiła jaśniejszego pasa przy prawej krawędzi. */
.page-hero .hero-foto::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  /* Smoothstep zamiast prostego odcinka - bez pasów na przejściu. */
  background: linear-gradient(180deg, rgb(35 38 36 / 0.000) 0.0%, rgb(35 38 36 / 0.020) 8.3%, rgb(35 38 36 / 0.074) 16.7%, rgb(35 38 36 / 0.156) 25.0%, rgb(35 38 36 / 0.259) 33.3%, rgb(35 38 36 / 0.376) 41.7%, rgb(35 38 36 / 0.500) 50.0%, rgb(35 38 36 / 0.624) 58.3%, rgb(35 38 36 / 0.741) 66.7%, rgb(35 38 36 / 0.844) 75.0%, rgb(35 38 36 / 0.926) 83.3%, rgb(35 38 36 / 0.980) 91.7%, rgb(35 38 36 / 1.000) 100.0%);
  pointer-events: none;
}
/* Delikatne rozmycie samego zdjęcia. Powiększenie o kilka procent chowa
   miękkie krawędzie, które rozmycie zostawia przy brzegach kadru. */
.page-hero .hero-foto-img {
  filter: blur(8px) saturate(0.9);
  transform: scale(1.06);
}
/* Mały turkusowy nadtytuł nie ma szans nad jasnym kadrem (3.6 przy wymaganych
   4.5 nawet w gęstej mgle), więc w nagłówku ze zdjęciem jest jasny. Turkus
   zostaje w kursywie tytułu, która jako duży tekst ma próg 3.0 i go spełnia. */
.page-hero.ma-foto .section-tag { color: rgb(var(--tekst-rgb) / 1); }
.page-hero.ma-foto .section-tag::before { background: rgb(var(--tekst-rgb) / 0.5); }
.page-hero.ma-foto .page-hero-inner { position: relative; z-index: 1; }
/* Zdjęcie Kasi w sekcji „O mnie" — ta sama proporcja co rysunek zastępczy,
   więc podmiana nie przestawia układu kolumn. */
.o-kasi-foto { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 4; }

.page-hero {
  position: relative; overflow: hidden;
  min-height: 58vh; display: flex; align-items: flex-end;
  padding: 160px 0 72px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgb(var(--zielen-rgb) / 0.5) 0%, rgb(var(--czern-rgb) / 0) 62%),
    radial-gradient(100% 80% at 88% 25%, rgb(var(--turkus-ciemny-rgb) / 0.75) 0%, rgb(var(--czern-rgb) / 0) 58%),
    var(--czern2);
}
.page-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.page-hero h1 {
  font-family: var(--serif); font-size: clamp(40px, 6vw, 76px); font-weight: 300; line-height: 1.05;
  color: var(--krem); letter-spacing: -0.02em; margin-bottom: 24px;
}
.page-hero h1 em { font-style: italic; color: var(--turkus-jasny); }
.page-hero-sub { font-size: 15px; line-height: 1.75; color: rgb(var(--tekst-rgb) / var(--a-tekst)); max-width: 540px; margin-bottom: 40px; }
.page-hero-actions { display: flex; gap: 20px; flex-wrap: wrap; }

/* Nagłówki i lead sekcji na podstronach */
.section-title {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 300;
  color: var(--krem); line-height: 1.15; margin-bottom: 32px;
}
.section-title em { font-style: italic; color: var(--turkus-jasny); }
.section-intro { max-width: 660px; margin-bottom: 56px; }
.section-intro p { font-size: 15px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-bottom: 16px; }

/* Warianty tła sekcji */
.bg-black { background: var(--czern); }
.bg-black2 { background: var(--czern2); }
/* Głęboki turkus zamiast niemal czarnej zieleni (#1E2F2D) - turkus to
   główny kolor marki i ma być widać, że te sekcje są turkusowe. Jasny
   turkusowy akcent ma na tym tle 5.5:1, tekst biegnący ponad 10:1. */
.bg-forest { background: #24433F; }
/* Sekcja w kolorze marki — tu turkus występuje jako powierzchnia, nie jako tekst. */
.bg-turkus { background: var(--turkus); }
.bg-turkus .section-tag { color: rgb(var(--tekst-rgb) / 0.95); }
.bg-turkus h2, .bg-turkus h3, .bg-turkus .section-title { color: var(--krem); }
.bg-turkus p, .bg-turkus .section-intro p { color: rgb(var(--tekst-rgb) / 1); }

/* Galeria statyczna — reużywa .karta / .karta-placeholder z karuzeli */
.galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.galeria-grid .karta { width: auto; }

/* Pakiety / cennik */
.pakiety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pakiet {
  background: rgb(var(--zielen-rgb) / 0.30); border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.12);
  border-radius: 12px; padding: 36px 32px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s, transform 0.6s, border-color 0.3s;
}
.pakiet.visible { opacity: 1; transform: translateY(0); }
.pakiet:hover { border-color: rgb(var(--turkus-jasny-rgb) / 0.3); }
.pakiet-nazwa { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--krem); margin-bottom: 10px; }
.pakiet-cena { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--turkus-jasny); margin-bottom: 24px; display: block; }
.pakiet ul { list-style: none; }
.pakiet li { font-size: 13px; line-height: 1.9; color: rgb(var(--tekst-rgb) / var(--a-tekst)); padding-left: 16px; position: relative; }
.pakiet li::before { content: '·'; position: absolute; left: 4px; color: var(--turkus-jasny); }

/* FAQ */
.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.1); padding: 20px 0; }
.faq summary {
  font-family: var(--serif); font-size: 19px; font-weight: 300; color: var(--krem);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; color: var(--turkus-jasny); flex-shrink: 0; }
/* Przy otwartym pytaniu plus obraca się w krzyżyk. Wcześniej wstawiała się
   tu półpauza z CSS - jedyny długi myślnik, którego nie było widać w treści,
   bo nie siedzi w tekście strony, tylko w arkuszu stylów. */
.faq summary::after { transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { margin-top: 16px; }

/* Link „zobacz więcej" */
.link-more {
  display: inline-block; margin-top: 40px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--turkus-jasny); text-decoration: none;
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.25); padding-bottom: 3px;
  transition: color 0.25s, border-color 0.25s;
}
.link-more:hover { color: var(--krem); border-color: var(--turkus-jasny); }

/* ============================================================
   PLACEHOLDERY — miejsca czekające na materiały od klientki.
   Celowo widoczne (przerywana ramka), żeby nic nie poszło na
   produkcję niedokończone. Usuwaj razem z wpisaniem treści.
   ============================================================ */
/* Klasa zdublowana celowo — podbija specyficzność ponad reguły typu
   `.section-intro p` czy `.usluga-card p`, żeby placeholder wyglądał
   identycznie w każdym kontekście. */
.placeholder.placeholder {
  display: inline-block; max-width: 100%;
  font-family: var(--sans); font-size: 11px; font-weight: 400; font-style: normal;
  letter-spacing: 0.06em; line-height: 1.7; text-transform: none;
  color: rgb(var(--tekst-rgb) / var(--a-tekst)); background: rgb(var(--turkus-jasny-rgb) / 0.05);
  border: 1px dashed rgb(var(--turkus-jasny-rgb) / 0.28); border-radius: 4px;
  padding: 8px 12px;
}
.placeholder.placeholder-block { display: block; }

/* ============================================================
   RESPONSYWNOŚĆ KOMPONENTÓW PODSTRON
   Musi stać PO definicjach powyżej — reguły mają tę samą
   specyficzność, więc decyduje kolejność w pliku.
   ============================================================ */
@media (max-width: 900px) {
  .page-hero { padding: 120px 0 56px; min-height: 46vh; }
  .page-hero-inner { padding: 0 28px; }
  /* Na wąskim ekranie treść rozpycha nagłówek i zajmuje go niemal w całości,
     a gradient poziomy kończy się przed tekstem. Mgła jest więc gęstsza
     i równomierna w pionie. */
  .hero-foto-cien {
    background:
      linear-gradient(180deg,
        rgb(var(--turkus-ciemny-rgb) / 0.50) 0%,
        rgb(var(--turkus-ciemny-rgb) / 0.78) 18%,
        rgb(var(--turkus-ciemny-rgb) / 0.80) 100%);
    /* Na telefonie tekst zajmuje całą szerokość - bez rozrzedzania z prawej. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Na telefonie nagłówek strony głównej ma 100vh, a sam tekst zajmuje jego
     górne dwie trzecie - zaczyna się tuż pod paskiem nawigacji. Gradient musi
     więc być mocny od samej góry, inaczej nadtytuł siada na jasnych płatkach. */
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgb(var(--czern-rgb) / 0.78) 0%,
      rgb(var(--czern-rgb) / 0.80) 40%,
      rgb(var(--czern-rgb) / 0.90) 100%
    );
  }
  .galeria-grid { grid-template-columns: 1fr 1fr; }
  .pakiety-grid { grid-template-columns: 1fr; }
  .section-intro { margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .galeria-grid { grid-template-columns: 1fr; }
  .pakiet { padding: 28px 24px; }
  .faq summary { font-size: 17px; }
}

/* ============================================================
   SEKCJA KONTAKTOWA + FORMULARZ
   ============================================================ */
.kontakt-section { background: var(--turkus-ciemny); }
.kontakt-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }

/* Mapa dojazdu — osadzona wizytówka Google. */
.mapa { margin: 36px 0 0; }
/* Miejsce na mapę ma stały kształt, zanim mapa się wczyta - przycisk
   nie przesuwa układu, gdy zamienia się w ramkę Google. */
.mapa-ramka {
  aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  background: rgb(var(--turkus-ciemny-rgb) / 0.7);
  border: 1px solid rgb(var(--tekst-rgb) / 0.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
}
.mapa-ramka--wczytana { padding: 0; border: 0; background: none; display: block; }
.mapa-zaladuj {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--krem);
  border: 1px solid rgb(var(--tekst-rgb) / 0.45); border-radius: 0;
  padding: 13px 24px; min-height: 44px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mapa-zaladuj:hover { border-color: var(--krem); background: rgb(var(--tekst-rgb) / 0.06); }
.mapa-ikona { width: 20px; height: 20px; flex: 0 0 auto; }
.mapa-uwaga { margin: 0; max-width: 34ch; font-size: 12px; line-height: 1.6; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.mapa iframe {
  display: block; width: 100%; aspect-ratio: 4 / 3; border: 0;
  border-radius: 4px;
  /* Domyślnie mapa świeci bielą na ciemnej stronie — lekkie przygaszenie
     i przesunięcie w stronę marki sprawia, że nie wyskakuje z kompozycji. */
  filter: grayscale(0.35) brightness(0.86) contrast(1.05);
  transition: filter 0.3s ease;
}
.mapa:hover iframe { filter: none; }
.mapa-podpis {
  margin-top: 12px; font-size: 12.5px; line-height: 1.7;
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.mapa-link { color: var(--turkus-jasny); white-space: nowrap; }
.mapa-link:hover { color: var(--turkus-jasny); }
.kontakt-lewa h2 {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 300;
  color: var(--krem); line-height: 1.15; margin-bottom: 24px;
}
.kontakt-lewa h2 em { font-style: italic; color: var(--turkus-jasny); }
.kontakt-lead { font-size: 15px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-bottom: 40px; }
/* Bez tej reguly odnosniki w akapicie wprowadzajacym dostawaly domyslny
   niebieski przegladarki — na ciemnozielonym tle kontrast 1,49, czyli
   praktycznie niewidoczne. */
.kontakt-lead a { color: var(--turkus-jasny); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kontakt-lead a:hover { color: var(--krem); }

.kontakt-dane { display: block; margin-top: 4px; border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.13); }
.kontakt-dane dt {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--turkus-jasny); padding-top: 20px; margin-bottom: 7px;
}
.kontakt-dane dd {
  font-size: 15px; line-height: 1.65; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
  margin: 0; padding-bottom: 20px; border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.13);
}
.kontakt-dane dd:last-of-type { border-bottom: none; padding-bottom: 0; }
.kontakt-dane a {
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); text-decoration: none;
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.25);
  transition: color 0.25s, border-color 0.25s;
}
.kontakt-dane a:hover { color: var(--krem); border-color: var(--turkus-jasny); }
/* Telefon — pierwszy kanał kontaktu, więc traktowany jak nagłówek */
.kontakt-dane dd.kontakt-telefon { padding-bottom: 22px; }
.kontakt-dane dd.kontakt-telefon a {
  font-family: var(--serif); font-size: 32px; font-weight: 300; line-height: 1.1;
  letter-spacing: 0.02em; color: var(--krem); border-bottom: none;
}
.kontakt-dane dd.kontakt-telefon a:hover { color: var(--turkus-jasny); }

/* Formularz */
.form-kontakt {
  background: rgb(var(--czern-rgb) / 0.35); border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.12);
  border-radius: 12px; padding: 40px 36px;
}
.form-wstep { font-size: 13px; line-height: 1.75; color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-bottom: 28px; }
.pole { margin-bottom: 22px; }
.pole label {
  display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-bottom: 8px;
}
/* Wszystkie typy pól tekstowych, nie tylko „text" — formularz ślubny
   i firmowy używają też tel, email, date, number i url, a bez tego
   renderowałyby się jako białe kontrolki systemowe. */
.pole input[type="text"],
.pole input[type="tel"],
.pole input[type="email"],
.pole input[type="date"],
.pole input[type="number"],
.pole input[type="url"],
.pole select,
.pole textarea {
  width: 100%; font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--krem);
  background: rgb(var(--turkus-jasny-rgb) / 0.04); border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.18);
  border-radius: 6px; padding: 13px 14px;
  transition: border-color 0.25s, background 0.25s;
}
.pole textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.pole select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgb(var(--turkus-jasny-rgb) / 0.5) 50%),
                    linear-gradient(135deg, rgb(var(--turkus-jasny-rgb) / 0.5) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.pole select option { background: var(--czern2); color: var(--krem); }
/* Ikona kalendarza w polu daty jest domyślnie czarna — nieczytelna na ciemnym tle. */
.pole input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.45; cursor: pointer; }
.pole input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.8; }
.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  outline: none; border-color: rgb(var(--turkus-jasny-rgb) / 0.55); background: rgb(var(--turkus-jasny-rgb) / 0.07);
}
.pole input::placeholder, .pole textarea::placeholder { color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.pole-podpowiedz { display: block; font-size: 11px; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); margin-top: 6px; }

.pole-blad { display: none; font-size: 12px; color: #C98A7A; margin-top: 7px; }
.pole.ma-blad .pole-blad { display: block; }
.pole.ma-blad input, .pole.ma-blad select, .pole.ma-blad textarea { border-color: rgba(201,138,122,0.6); }

/* Wyższa specyficzność niż `.pole label`, inaczej zgoda wyszłaby wersalikami. */
.pole label.zgoda {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 12px; margin-bottom: 0;
  color: rgb(var(--tekst-rgb) / var(--a-tekst));
}
.zgoda input[type="checkbox"] {
  appearance: none; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.35); border-radius: 3px;
  background: rgb(var(--turkus-jasny-rgb) / 0.04); cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.zgoda input[type="checkbox"]:checked { background: var(--turkus-jasny); border-color: var(--turkus-jasny); }
.zgoda input[type="checkbox"]:checked::after {
  content: ''; display: block; width: 4px; height: 8px; margin: 2px auto 0;
  border: solid var(--czern); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.zgoda input[type="checkbox"]:focus-visible { outline: 2px solid rgb(var(--turkus-jasny-rgb) / 0.5); outline-offset: 2px; }
.zgoda span { font-size: 12px; line-height: 1.65; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }
.zgoda a { color: var(--turkus-jasny); text-decoration: underline; text-underline-offset: 2px; }
.zgoda a:hover { color: var(--krem); }
.pole-zgoda { margin-top: 28px; }

/* Honeypot — poza ekranem, niewidoczny również dla czytników */
.pole-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-wyslij { margin-top: 8px; width: 100%; }
.form-wyslij[disabled] { opacity: 0.55; cursor: wait; }

.form-komunikat { display: none; margin-top: 20px; font-size: 13px; line-height: 1.7; border-radius: 6px; padding: 14px 16px; }
.form-komunikat.widoczny { display: block; }
.form-komunikat.sukces { color: #A8C0A2; background: rgb(var(--zielen-rgb) / 0.35); border: 1px solid rgba(168,192,162,0.3); }
.form-komunikat.blad { color: #C98A7A; background: rgba(74,44,44,0.25); border: 1px solid rgba(201,138,122,0.3); }

@media (max-width: 900px) {
  .kontakt-inner { grid-template-columns: 1fr; gap: 48px; }
  .form-kontakt { padding: 32px 24px; }
}

/* Proza dokumentowa — polityka prywatności */
.proza { max-width: 760px; }
.proza h2 {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 300;
  color: var(--krem); line-height: 1.25; margin: 48px 0 18px;
}
.proza h2:first-child { margin-top: 0; }
.proza p { font-size: 15px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst)); margin-bottom: 16px; }
.proza strong { color: rgb(var(--tekst-rgb) / var(--a-tekst)); font-weight: 400; }
.proza a { color: var(--turkus-jasny); text-decoration: underline; text-underline-offset: 3px; }
.proza a:hover { color: var(--krem); }
.proza ul { list-style: none; margin: 0 0 20px; }
.proza li {
  font-size: 15px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst));
  padding-left: 20px; position: relative;
}
.proza li::before { content: '·'; position: absolute; left: 6px; color: var(--turkus-jasny); }
.proza-data {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.1);
  font-size: 12px; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
}

/* Stopka — linia prawna i dane rejestrowe */
.footer-prawne a { color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); text-decoration: none; border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.2); }
.footer-prawne a:hover { color: var(--turkus-jasny); border-color: var(--turkus-jasny); }
.footer-prawne span { margin: 0 8px; opacity: 0.5; }
.footer-firma {
  max-width: 1160px; margin: 0 auto; padding: 16px 48px 0;
}
.footer-firma p { font-size: 11px; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); line-height: 1.7; }
@media (max-width: 900px) {
  .footer-firma { padding: 16px 28px 0; text-align: center; }
}

/* Fragmenty, które mają łamać się w całości, a nie w środku frazy */
.nie-lam { display: inline-block; }

/* ============================================================
   INSTAGRAM — okno na zewnętrzne medium, nie kolejna sekcja strony.
   Celowo najciemniejsza powierzchnia na stronie: odcina się
   i od --black2 (opinie powyżej), i od --forest-deep (kontakt poniżej).
   ============================================================ */
.instagram-section {
  background:
    /* Poświata zaczyna się poniżej górnej krawędzi, a nie na niej: krawędź
       ma wtedy na całej szerokości jeden kolor i sekcja z mgłą nad nią
       może się w niego płynnie wtopić. */
    radial-gradient(80% 50% at 50% 46%, rgb(var(--zielen-rgb) / 0.55) 0%, rgba(0,0,0,0) 72%),
    var(--turkus-ciemny);
  border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.09);
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.09);
}
.instagram-section .section-title { margin-bottom: 36px; }

/* Rama „okna" — sygnał, że treść pochodzi z zewnątrz */
.ig-okno {
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(var(--turkus-jasny-rgb) / 0.022);
}
.ig-belka {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  background: rgb(var(--turkus-jasny-rgb) / 0.04);
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.12);
}
.ig-glif { display: inline-flex; color: var(--turkus-jasny); }
.ig-uchwyt { font-family: var(--sans); font-size: 13px; letter-spacing: 0.05em; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.ig-zrodlo {
  margin-left: auto; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
}
.ig-tresc { padding: 3px; }

/* Siatka — wtyczka renderuje własny markup, więc narzucamy układ z zewnątrz */
.ig-siatka #sb_instagram { padding: 0 !important; width: 100% !important; background: none !important; }
.ig-siatka #sb_instagram .sb_instagram_header,
.ig-siatka #sb_instagram #sbi_load { display: none !important; }

.ig-siatka #sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 0 !important;
  width: 100% !important;
}
.ig-siatka #sb_instagram #sbi_images .sbi_item {
  width: 100% !important; padding: 0 !important; margin: 0 !important; float: none !important;
}
.ig-siatka #sb_instagram .sbi_photo_wrap { position: relative; }
.ig-siatka #sb_instagram .sbi_photo_wrap,
.ig-siatka #sb_instagram .sbi_photo {
  display: block; width: 100% !important;
  aspect-ratio: 1 / 1; height: auto !important;
  background-size: cover !important; background-position: center !important;
}
.ig-siatka #sb_instagram .sbi_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-siatka #sb_instagram .sbi_item .sbi_photo {
  filter: brightness(0.82) saturate(0.9);
  transition: filter 0.35s;
}
.ig-siatka #sb_instagram .sbi_item:hover .sbi_photo { filter: brightness(1) saturate(1); }

/* Delikatny gradient Instagrama na hover — soft-light, żeby został w palecie */
.ig-siatka #sb_instagram .sbi_photo_wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.35s;
  mix-blend-mode: soft-light;
  background: linear-gradient(135deg,
    rgba(131,58,180,0.5) 0%,
    rgba(253,29,29,0.42) 55%,
    rgba(252,176,69,0.38) 100%);
}
.ig-siatka #sb_instagram .sbi_item:hover .sbi_photo_wrap::after { opacity: 1; }

/* Stan zastępczy — ramkę daje już „okno", więc tu tylko treść */
.ig-zastepczy { padding: 56px 40px; text-align: center; }
.ig-zastepczy p {
  font-size: 15px; line-height: 1.8; color: rgb(var(--tekst-rgb) / var(--a-tekst));
  max-width: 520px; margin: 0 auto 28px;
}

@media (max-width: 900px) {
  .ig-siatka #sb_instagram #sbi_images { grid-template-columns: repeat(3, 1fr); }
  .ig-zastepczy { padding: 40px 24px; }
  .ig-belka { padding: 12px 16px; }
}
@media (max-width: 600px) {
  .ig-siatka #sb_instagram #sbi_images { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BANER ZGODY (Complianz) — dopasowanie do palety strony.
   Style trzymamy tutaj, nie w ustawieniach wtyczki, żeby
   przetrwały jej aktualizacje i były w repozytorium.
   ============================================================ */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: var(--czern2);
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  font-family: var(--sans);
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
  padding: 26px 28px;
}
#cmplz-cookiebanner-container .cmplz-title,
#cmplz-cookiebanner-container .cmplz-header .cmplz-title {
  font-family: var(--serif);
  font-size: 24px; font-weight: 300; letter-spacing: 0.01em;
  color: var(--krem);
}
#cmplz-cookiebanner-container .cmplz-body,
#cmplz-cookiebanner-container .cmplz-message {
  font-size: 13px; line-height: 1.75; color: var(--turkus-jasny);
}
#cmplz-cookiebanner-container .cmplz-body a,
#cmplz-cookiebanner-container .cmplz-message a {
  color: var(--turkus-jasny); text-decoration: underline; text-underline-offset: 2px;
}

/* Przyciski — te same kształty co .btn-primary / .btn-ghost */
#cmplz-cookiebanner-container .cmplz-btn {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: 3px; padding: 12px 22px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
  background: var(--turkus-jasny); border: 1px solid var(--turkus-jasny); color: var(--czern);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover { background: var(--krem); border-color: var(--krem); }
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences {
  background: transparent; border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.3); color: var(--turkus-jasny);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover {
  border-color: var(--turkus-jasny); color: var(--krem);
}

/* Kategorie w widoku „Dostosuj" */
#cmplz-cookiebanner-container .cmplz-category {
  background: rgb(var(--turkus-jasny-rgb) / 0.04);
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.12);
  border-radius: 8px;
}
#cmplz-cookiebanner-container .cmplz-category-title {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
}
#cmplz-cookiebanner-container .cmplz-description {
  font-size: 12px; line-height: 1.7; color: rgb(var(--tekst-rgb) / var(--a-tekst));
}
/* Kategoria „Preferencje" — nic na tej stronie z niej nie korzysta,
   więc nie pokazujemy przełącznika, który niczego nie zmienia. */
#cmplz-cookiebanner-container .cmplz-category.cmplz-preferences { display: none; }

#cmplz-cookiebanner-container .cmplz-close { color: rgb(var(--tekst-rgb) / var(--a-tekst)); }
#cmplz-cookiebanner-container .cmplz-close:hover { color: var(--krem); }

@media (max-width: 600px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner { padding: 20px 18px; }
  #cmplz-cookiebanner-container .cmplz-title { font-size: 21px; }
}

/* Complianz wypisuje listę linków do własnych dokumentów prawnych.
   Nie mamy ich (mamy własną politykę prywatności), więc pozycje są puste
   i zostają po nich same punktory — stąd wyłączenie znaczników listy. */
#cmplz-cookiebanner-container .cmplz-cookiebanner ul,
#cmplz-cookiebanner-container .cmplz-cookiebanner ol { list-style: none; margin: 0; padding: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner li:has(> a:empty) { display: none; }

/* ============================================================
   NAWIGACJA — rozwijane „Usługi"
   Ten sam markup obsługuje desktop (hover) i mobile (accordion);
   różnicę robi wyłącznie CSS poniżej 900px.
   ============================================================ */
.nav-links > li { position: relative; }

.nav-rozwin {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 300;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--turkus-jasny); opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}
.nav-rozwin:hover,
.ma-dropdown.otwarty > .nav-rozwin { opacity: 1; }
.nav-rozwin:focus-visible { outline: 2px solid rgb(var(--turkus-jasny-rgb) / 0.5); outline-offset: 4px; opacity: 1; }
/* Jesteśmy na którejś z podstron usługowych */
.nav-rozwin.w-sekcji { opacity: 1; color: var(--krem); }

.nav-rozwin .chevron { display: inline-flex; transition: transform 0.25s ease; }
.ma-dropdown.otwarty > .nav-rozwin .chevron { transform: rotate(180deg); }

/* Rodzic z własną podstroną: napis prowadzi dalej, strzałka rozwija.
   Rozdzielenie jest konieczne na dotyku — jedno dotknięcie nie może
   naraz przejść na stronę i otworzyć listy. */
.ma-dropdown--z-rodzicem { display: inline-flex; align-items: center; gap: 6px; }
.nav-links .nav-rozwin-link { display: inline-flex; align-items: center; }
.nav-strzalka {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--turkus-jasny); opacity: 0.6;
  transition: opacity 0.2s, transform 0.25s ease;
}
.nav-strzalka:hover,
.ma-dropdown.otwarty > .nav-strzalka { opacity: 1; }
.nav-strzalka:focus-visible { outline: 2px solid rgb(var(--turkus-jasny-rgb) / 0.5); outline-offset: 3px; opacity: 1; }
.ma-dropdown.otwarty > .nav-strzalka .chevron { transform: rotate(180deg); }
.nav-strzalka .chevron { display: inline-flex; transition: transform 0.25s ease; }

.dropdown {
  position: absolute; top: calc(100% + 20px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  /* Szeroki na tyle, żeby zmieściły się dwie kolumny kart,
     ale nigdy szerszy niż okno — stąd max-width. */
  width: 664px; max-width: calc(100vw - 48px);
  list-style: none; margin: 0; padding: 34px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: rgb(var(--czern-rgb) / 0.985); backdrop-filter: blur(16px);
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.16);
  border-radius: 12px;                 /* jak .opinia, .pakiet, .form-kontakt */
  box-shadow: 0 26px 64px rgba(0,0,0,0.62), 0 2px 8px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 10;
}
/* Piąta usługa na całą szerokość — 2+2+1 zamiast dziury po układzie 3+2. */
.dropdown > li:last-child { grid-column: 1 / -1; }
.ma-dropdown.otwarty > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Niewidzialny mostek — zjechanie myszą z przycisku na listę nie gubi hoveru */
.ma-dropdown::after {
  content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 22px;
}
.ma-dropdown.otwarty::after { pointer-events: auto; }

.nav-links .dropdown a {
  display: block; height: 100%; white-space: normal;
  padding: 20px 22px; text-transform: none; opacity: 1;
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.12);
  border-radius: 8px;                  /* jak .wyroz-item */
  background: rgb(var(--turkus-jasny-rgb) / 0.022);
  transition: background 0.22s, border-color 0.22s;
}
.nav-links .dropdown a:hover,
.nav-links .dropdown a:focus-visible {
  background: rgb(var(--turkus-jasny-rgb) / 0.065);
  border-color: rgb(var(--turkus-jasny-rgb) / 0.32);
}
.nav-links .dropdown a.active { border-color: rgb(var(--turkus-jasny-rgb) / 0.28); background: rgb(var(--turkus-jasny-rgb) / 0.05); }

.dd-nazwa {
  display: block; font-family: var(--sans);
  font-size: 14px; font-weight: 400; letter-spacing: 0.03em; line-height: 1.3;
  color: var(--turkus-jasny); transition: color 0.2s;
}
.dd-opis {
  display: block; margin-top: 7px;
  font-size: 11.5px; line-height: 1.6; letter-spacing: 0.01em;
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); transition: color 0.2s;
}
.nav-links .dropdown a:hover .dd-nazwa,
.nav-links .dropdown a:focus-visible .dd-nazwa { color: var(--krem); }
.nav-links .dropdown a:hover .dd-opis,
.nav-links .dropdown a:focus-visible .dd-opis { color: var(--turkus-jasny); }
.nav-links .dropdown a.active .dd-nazwa { color: var(--krem); }

@media (max-width: 900px) {
  .nav-links > li { position: static; }
  .nav-rozwin {
    display: flex; width: 100%; justify-content: space-between;
    padding: 16px 24px; font-size: 13px; opacity: 0.85;
  }
  .ma-dropdown::after { display: none; }
  /* W panelu hamburgera rodzic i strzałka dzielą jeden wiersz:
     napis prowadzi na stronę, kwadrat po prawej rozwija listę. */
  /* Siatka, nie flex: lista rozwijana animuje max-height, a jako element
     elastyczny w zawijanym rzędzie dostawała nieokreśloną wysokość bazową
     i animacja się nie uruchamiała. W siatce wiersz jest jawny. */
  .ma-dropdown--z-rodzicem { display: grid; grid-template-columns: 1fr 56px; width: 100%; }
  .nav-links .ma-dropdown--z-rodzicem > .nav-rozwin-link { padding: 16px 24px; }
  .nav-strzalka {
    border-left: 1px solid rgb(var(--turkus-jasny-rgb) / 0.08);
    padding: 16px 0; opacity: 0.85;
  }
  .ma-dropdown--z-rodzicem > .dropdown { grid-column: 1 / -1; }
  .dropdown {
    position: static; transform: none; width: auto; max-width: none;
    display: block; gap: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: rgb(var(--turkus-jasny-rgb) / 0.04);
    border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height 0.3s ease;
  }
  /* W panelu hamburgera karty wracają do prostych wierszy — ramki
     w wąskiej kolumnie robiłyby wyłącznie hałas. */
  .nav-links .dropdown a { border: 0; border-radius: 0; background: none; height: auto; }
  .nav-links .dropdown a.active { background: rgb(var(--turkus-jasny-rgb) / 0.05); border: 0; }
  /* Desktopowa reguła centrująca ma wyższą specyficzność i bez tego
     przesuwałaby listę o pół szerokości w lewo, poza ekran. */
  .ma-dropdown.otwarty > .dropdown { max-height: 520px; transform: none; }
  .nav-links .dropdown a { padding: 13px 24px 13px 40px; border-radius: 0; }
  .dd-nazwa { font-size: 13px; }
  .dd-opis { font-size: 11.5px; margin-top: 3px; }
  .nav-links .dropdown li + li { border-top: 1px solid rgb(var(--turkus-jasny-rgb) / 0.05); }
}

/* ==========================================================================
   Dostępność — obsługa klawiaturą i ograniczony ruch
   Dopisane po audycie 29.09.2026.
   ========================================================================== */

/* Odnośnik pomijający nawigację. Widoczny dopiero po sfokusowaniu, więc nie
   zabiera miejsca myszkującym, a osobie na klawiaturze oszczędza 17 tabulacji
   przez menu na każdej podstronie. */
.pomin-nawigacje {
  position: absolute; left: 16px; top: -100px; z-index: 2000;
  padding: 12px 20px; border-radius: 4px;
  background: var(--turkus); color: var(--krem);
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: top 0.18s ease;
}
.pomin-nawigacje:focus { top: 16px; }

/* Widoczny obrys dla wszystkiego, co da się sfokusować.
   :focus-visible, a nie :focus — dzięki temu obrys pokazuje się przy obsłudze
   klawiaturą, a nie po każdym kliknięciu myszą. Osobne reguły dla pól
   formularza i menu zostają wyżej; ta jest ogólna i domyka resztę: odnośniki,
   przyciski, kafle usług, karty lasów i stopkę. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--turkus-jasny);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Kafle i karty to duże powierzchnie — obrys tuż przy krawędzi czyta się
   lepiej niż odsunięty na trzy piksele poza nią. */
.usluga-card:focus-visible,
.las-karta:focus-visible,
.karta:focus-visible {
  outline-offset: -2px;
}
/* Na ciemnozielonym tle jaśniejszy turkus ma za mały kontrast wobec obrysu —
   tam obrys robimy kremowy. */
.bg-forest a:focus-visible,
.bg-forest button:focus-visible,
.cta-section a:focus-visible,
.cta-section button:focus-visible {
  outline-color: var(--krem);
}

/* Cele dotykowe: WCAG 2.2 wymaga 24 × 24 px. Odnośniki tekstowe miały
   20–21 px wysokości. Powiększamy obszar kliknięcia samym odstępem
   wewnętrznym, bez ruszania typografii — wygląd zostaje ten sam. */
.mapa-link,
.kontakt-lead a,
.kontakt-dane dd a,
.footer-prawne a {
  display: inline-block;
  padding-block: 3px;
}
/* Tu tylko od góry: .link-more ma u dołu 3 px odstępu pod kreską
   podkreślenia i zwiększenie go odsunęłoby kreskę od tekstu. */
.link-more { padding-top: 5px; }
.footer-col a { padding-block: 2px; }
/* Odnośników wplecionych w zdanie — „polityce prywatności" w treści zgody
   i „you.rise" w podpisie stopki — świadomie nie powiększamy. WCAG 2.2
   zwalnia z wymogu 24 px cele osadzone w toku tekstu, a dopchnięcie ich
   rozbiłoby interlinię akapitu, w którym stoją. */

/* Ograniczony ruch. Strona ma animacje wejścia sekcji i przesuwającą się
   karuzelę realizacji. Kto ustawił w systemie ograniczenie ruchu, zwykle ma
   ku temu powód — wtedy treść pojawia się od razu, bez przesunięć. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1 !important; transform: none !important; }
  /* Karuzela ma animację w nieskończonej pętli — sama skrócona długość
     trwania zamieniłaby ją w migotanie, więc zatrzymujemy ją wprost. */
  .karuzela-track { animation: none !important; }
}

/* ==========================================================================
   Układ — poprawki po przeglądzie 29.09.2026
   ========================================================================== */

/* SIATKA LASÓW
   Siedem modeli w trzech kolumnach zostawiało w ostatnim rzędzie jedną kartę
   i 710 px pustki obok niej. Siatka o stałej liczbie kolumn zawsze zrobi taką
   dziurę przy liczbie kart niepodzielnej przez tę liczbę — a modeli może kiedyś
   być sześć albo osiem. Dlatego zwijanie elastyczne: karty w ostatnim rzędzie
   rozciągają się na wolne miejsce, więc dziura nie powstaje przy żadnej liczbie. */
.lasy-grid {
  display: flex;
  flex-wrap: wrap;
}
.las-karta {
  flex: 1 1 260px;
  min-width: 0;
}

/* Puste miejsce na zdjęcie miało 471 px wysokości i przy siedmiu kartach bez
   zdjęć strona zamieniała się w ciąg ciemnych prostokątów. Dopóki zdjęć nie ma,
   zostaje wąski pasek — sygnalizuje, że zdjęcie tu będzie, ale nie dominuje
   nad nazwą i ceną. Po wgraniu zdjęcia wraca pełna proporcja 3:4. */
.las-foto--pusta {
  aspect-ratio: 5 / 2;
}

/* CENNIKI FORM POŻEGNALNYCH
   Opis i tabela stały jeden pod drugim w kolumnie szerokiej na 760 px, przy
   kontenerze 1160 px. Efekt: ściana tekstu i 740 px pustki po prawej. Tam,
   gdzie forma ma cennik, opis i tabela stają obok siebie — cena jest wtedy
   na wysokości tego, czego dotyczy, a strona skraca się o jedną trzecią.
   Reguła zawężona do form z tabelą, żeby opis bez cennika nie ciągnął się
   na pełną szerokość i nie robił zbyt długich wierszy. */
@media (min-width: 900px) {
  .forma:has(.tabela-cen-owijka) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 0 64px;
    align-items: start;
  }
  .forma:has(.tabela-cen-owijka) .forma-tytul { grid-column: 1 / -1; }
  .forma:has(.tabela-cen-owijka) > p { margin: 0; }
  .forma:has(.tabela-cen-owijka) .tabela-cen-owijka { margin-top: 0; }

  /* Lista dodatków to cztery pozycje w kolumnie 560 px — w dwóch słupkach
     czyta się jednym spojrzeniem i nie wydłuża strony. */
  .lista-dodatkow {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
  }
}

/* ============================================================
   POWIĘKSZANIE ZDJĘĆ
   Kafelek galerii jest przyciskiem, więc zdejmujemy z niego domyślny wygląd
   przycisku. Reset nie może ruszać układu: szerokość i proporcje ustawia
   reguła `.karta` wyżej w pliku (360 px w karuzeli) oraz `.galeria-grid
   .karta` w siatce. Ta reguła stoi dalej i ma tę samą specyficzność, więc
   każda własność układu dopisana tutaj nadpisałaby tamte - `width: 100%`
   rozciągnęło już raz kafelki karuzeli na całą szerokość toru. */
.karta {
  appearance: none; -webkit-appearance: none;
  border: 0; margin: 0; padding: 0;
  background: none; color: inherit; font: inherit; text-align: inherit;
  cursor: zoom-in;
}

.podglad {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  background: rgb(var(--czern-rgb) / 0.975);
}
.podglad[hidden] { display: none; }
body.podglad-otwarty { overflow: hidden; }

.podglad-ramka {
  margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.podglad-ramka img {
  max-width: 100%;
  /* Zostawiamy miejsce na podpis i oddech u góry i u dołu. */
  max-height: calc(100vh - 140px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 2px; cursor: default;
}
.podglad-ramka figcaption {
  display: flex; gap: 14px; align-items: baseline; justify-content: center;
  flex-wrap: wrap; text-align: center;
  font-size: 14px; color: rgb(var(--tekst-rgb) / var(--a-tekst));
}
.podglad-licznik {
  font-size: 12px; letter-spacing: 0.14em;
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
}

.podglad-zamknij, .podglad-nav {
  appearance: none; -webkit-appearance: none;
  background: rgb(var(--czern-rgb) / 0.55);
  border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.28);
  color: rgb(var(--tekst-rgb) / var(--a-tekst));
  cursor: pointer; line-height: 1;
  /* 44 px to wygodny cel dotykowy - te przyciski trafia się kciukiem. */
  min-width: 44px; min-height: 44px;
  border-radius: 999px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.podglad-zamknij:hover, .podglad-nav:hover {
  background: rgb(var(--czern-rgb) / 0.8);
  border-color: rgb(var(--turkus-jasny-rgb) / 0.6);
}
.podglad-zamknij {
  position: absolute; top: 20px; right: 20px;
  font-size: 26px; padding-bottom: 4px;
}
.podglad-nav { font-size: 30px; padding-bottom: 5px; flex: 0 0 auto; }
.podglad-nav[hidden] { display: none; }

@media (max-width: 600px) {
  .podglad { padding: 12px; gap: 4px; }
  .podglad-ramka img { max-height: calc(100vh - 170px); }
  /* Na telefonie strzałki schodzą na dół, żeby nie zasłaniały zdjęcia. */
  .podglad { flex-wrap: wrap; align-content: center; }
  .podglad-nav { order: 2; }
  .podglad-ramka { order: 1; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .podglad-zamknij, .podglad-nav { transition: none; }
}


/* ============================================================
   SEKCJE PORTFOLIO W KOLORZE LNU
   Każda sekcja z realizacjami ma tło #EEE9DF - ociepla stronę
   i odróżnia „tu zobaczysz prace" od reszty. Wcześniej był tu
   brzoskwiniowy piasek #EED9C4, ale przy nasyceniu 55% ciągnął
   w pomarańcz, czyli w przeciwieństwo turkusu, i oba kolory ze
   sobą walczyły. Len ma nasycenie 31%: zostaje ciepły, nie
   konkuruje z turkusem i jest jaśniejszy, o co prosiła Kasia.

   Kontrasty na lnie: tekst #3A3A38 - 9.4:1, przygaszony
   #55554F - 6.2:1, turkus marki #35645F - 5.5:1. Turkus może więc
   być kolorem tekstu - nadtytułów, kursyw w tytułach, linków.
   ============================================================ */
.bg-piasek {
  --jasna-tytul: #1E2F2D;
  --jasna-tekst: #3A3A38;
  --jasna-tekst-2: #55554F;
  --jasna-akcent: var(--turkus);
  --jasna-linia: rgb(var(--turkus-rgb) / 0.22);
  background: #EEE9DF;
  color: var(--jasna-tekst);
}
.bg-piasek .section-tag { color: var(--jasna-akcent); }
.bg-piasek .section-tag::before { background: rgb(var(--turkus-rgb) / 0.5); }
.bg-piasek .section-title,
.bg-piasek h2, .bg-piasek h3 { color: var(--jasna-tytul); }
.bg-piasek .section-title em,
.bg-piasek h2 em, .bg-piasek h3 em { color: var(--jasna-akcent); }
.bg-piasek p,
.bg-piasek li,
.bg-piasek .section-intro p { color: var(--jasna-tekst); }
.bg-piasek strong { color: var(--jasna-tytul); }
.bg-piasek a:not([class]) { color: var(--jasna-akcent); }

.bg-piasek .link-more { color: var(--jasna-akcent); border-color: rgb(var(--turkus-rgb) / 0.45); }
.bg-piasek .link-more:hover { color: var(--jasna-tytul); border-color: var(--jasna-akcent); }

.bg-piasek .btn-ghost { color: var(--jasna-akcent); border-color: rgb(var(--turkus-rgb) / 0.5); }
.bg-piasek .btn-ghost:hover { color: var(--jasna-tytul); border-color: var(--jasna-akcent); }

/* Karty usług i kroków */
.bg-piasek .usluga-card {
  border-top-color: var(--jasna-linia);
  border-right-color: rgb(var(--turkus-rgb) / 0.14);
}
.bg-piasek .usluga-card:hover { background: rgb(var(--turkus-rgb) / 0.05); }
.bg-piasek .usluga-num,
.bg-piasek .usluga-tag { color: var(--jasna-akcent); }
.bg-piasek .usluga-card h3 { color: var(--jasna-tytul); }
.bg-piasek .usluga-card p { color: var(--jasna-tekst); }

/* Wyróżniki */
.bg-piasek .wyroz-item:hover { background: rgb(var(--turkus-rgb) / 0.06); }
.bg-piasek .wyroz-accent,
.bg-piasek .wyroz-item h3 .star { color: var(--jasna-akcent); }
.bg-piasek .wyroz-item h3 { color: var(--jasna-tytul); }
.bg-piasek .wyroz-item p { color: var(--jasna-tekst); }

/* Pytania i odpowiedzi */
.bg-piasek .faq details { border-bottom-color: var(--jasna-linia); }
.bg-piasek .faq summary { color: var(--jasna-tytul); }
.bg-piasek .faq summary::after { color: var(--jasna-akcent); }
.bg-piasek .faq details > *:not(summary),
.bg-piasek .faq details p { color: var(--jasna-tekst); }

/* Lista dodatków z cenami */
.bg-piasek .lista-dodatkow li { border-bottom-color: var(--jasna-linia); }
.bg-piasek .dodatek-nazwa { color: var(--jasna-tekst-2); }
.bg-piasek .dodatek-cena { color: var(--jasna-tytul); }

/* Fokus z klawiatury musi być widoczny także na jasnym tle. */
.bg-piasek a:focus-visible,
.bg-piasek button:focus-visible,
.bg-piasek summary:focus-visible { outline-color: var(--turkus); }

/* Sekcja realizacji na stronie głównej ma własne klasy nagłówka. */
.realizacje.bg-piasek .realizacje-header h2 { color: var(--jasna-tytul); }
.realizacje.bg-piasek .realizacje-header h2 em { color: var(--jasna-akcent); }
.realizacje.bg-piasek .realizacje-sub { color: var(--jasna-tekst-2); }

/* Pusta galeria („w przygotowaniu") na jasnym tle. */
.bg-piasek .placeholder.placeholder {
  color: var(--jasna-tekst);
  background: rgb(var(--turkus-rgb) / 0.06);
  border-color: rgb(var(--turkus-rgb) / 0.35);
}

/* ============================================================
   SEKCJE ZE ZDJĘCIEM W MGLE
   Rozmyte zdjęcie pod poświatą, jak w nagłówkach. Wariant jasny
   zastępuje płaski krem: jest równie jasny, ale ma fakturę kadru,
   więc nie wygląda jak dziura w ciemnej stronie.
   ============================================================ */
:root { --mgla-przejscie: 170px; }
@media (max-width: 900px) { :root { --mgla-przejscie: 120px; } }

/* Przejście między sekcjami.
   Na samej granicy sekcja z mgłą ma dokładnie kolor sąsiada, więc nie ma
   tam żadnej krawędzi. Zdjęcie wyłania się z tego koloru stopniowo przez
   170 px (na telefonie 120 px) i jest w pełni widoczne 40 px przed tekstem.
   Przy krótszym przejściu skok z jasnego piasku w ciemny las wyglądał jak
   smuga, dlatego sekcje z mgłą mają większy margines niż pozostałe.

   Dwie wcześniejsze wersje zostawiały kreskę: raz zdjęcie było ucięte na
   granicy, raz kryło w pełni aż do granicy i dopiero tam zaczynało gasnąć,
   więc ciemna fotografia stykała się bezpośrednio z jasnym sąsiadem.

   Kolor sąsiada wybierają zmienne niżej. Środek tła nie ma znaczenia, bo
   przykrywa go zdjęcie. */
.sekcja-mgla {
  --mgla-gora: var(--czern2);
  --mgla-dol: var(--czern2);
  position: relative; z-index: 1;
  padding-top: calc(var(--mgla-przejscie) + 40px);
  padding-bottom: calc(var(--mgla-przejscie) + 40px);
  background: linear-gradient(180deg, var(--mgla-gora) 0 50%, var(--mgla-dol) 50% 100%);
}
.bg-black + .sekcja-mgla { --mgla-gora: var(--czern); }
.bg-forest:not(.sekcja-mgla) + .sekcja-mgla { --mgla-gora: #24433F; }
.bg-piasek + .sekcja-mgla { --mgla-gora: #EEE9DF; }
/* Sąsiad poniżej wymaga :has(). Przeglądarka, która go nie zna, zostawi
   ciemny kolor przy dolnej krawędzi - zmienia się tylko wygląd przejścia. */
.sekcja-mgla:has(+ .bg-black) { --mgla-dol: var(--czern); }
.sekcja-mgla:has(+ .bg-forest:not(.sekcja-mgla)) { --mgla-dol: #24433F; }
.sekcja-mgla:has(+ .bg-piasek) { --mgla-dol: #EEE9DF; }
.sekcja-mgla:has(+ .cta-section) { --mgla-dol: var(--turkus); }
/* Kontakt na stronie głównej sąsiaduje od dołu ze stopką. */
#kontakt.sekcja-mgla { --mgla-dol: var(--czern); }
/* Strona główna: opinie stoją między wyróżnikami a Instagramem (oba w
   głębokiej zieleni). */
.wyrózniki + .sekcja-mgla { --mgla-gora: var(--turkus-ciemny); }
.sekcja-mgla:has(+ .instagram-section) { --mgla-dol: var(--turkus-ciemny); }
/* Instagram ma cienką linię u góry - przy sekcji z mgłą nad nim tniemy
   nią płynne przejście, więc wtedy jej nie ma. */
.sekcja-mgla + .instagram-section { border-top: 0; }
/* Gwiazdki oceny: mały turkus na zdjęciu nie przechodzi normy (4.46). */
.sekcja-mgla--ciemna .stars { color: var(--krem); }

.sekcja-mgla-tlo {
  position: absolute; inset: 0;
  z-index: -1; overflow: hidden; pointer-events: none;
  /* Krzywa smoothstep (3t² - 2t³) w 12 krokach: bez załamań, które przy
     kilku przystankach połączonych odcinkami było widać jako pasy. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent calc(var(--mgla-przejscie) * 0.0000),
    rgb(0 0 0 / 0.020) calc(var(--mgla-przejscie) * 0.0833),
    rgb(0 0 0 / 0.074) calc(var(--mgla-przejscie) * 0.1667),
    rgb(0 0 0 / 0.156) calc(var(--mgla-przejscie) * 0.2500),
    rgb(0 0 0 / 0.259) calc(var(--mgla-przejscie) * 0.3333),
    rgb(0 0 0 / 0.376) calc(var(--mgla-przejscie) * 0.4167),
    rgb(0 0 0 / 0.500) calc(var(--mgla-przejscie) * 0.5000),
    rgb(0 0 0 / 0.624) calc(var(--mgla-przejscie) * 0.5833),
    rgb(0 0 0 / 0.741) calc(var(--mgla-przejscie) * 0.6667),
    rgb(0 0 0 / 0.844) calc(var(--mgla-przejscie) * 0.7500),
    rgb(0 0 0 / 0.926) calc(var(--mgla-przejscie) * 0.8333),
    rgb(0 0 0 / 0.980) calc(var(--mgla-przejscie) * 0.9167),
    #000 calc(var(--mgla-przejscie) * 1.0000),
    #000 calc(100% - var(--mgla-przejscie) * 1.0000),
    rgb(0 0 0 / 0.980) calc(100% - var(--mgla-przejscie) * 0.9167),
    rgb(0 0 0 / 0.926) calc(100% - var(--mgla-przejscie) * 0.8333),
    rgb(0 0 0 / 0.844) calc(100% - var(--mgla-przejscie) * 0.7500),
    rgb(0 0 0 / 0.741) calc(100% - var(--mgla-przejscie) * 0.6667),
    rgb(0 0 0 / 0.624) calc(100% - var(--mgla-przejscie) * 0.5833),
    rgb(0 0 0 / 0.500) calc(100% - var(--mgla-przejscie) * 0.5000),
    rgb(0 0 0 / 0.376) calc(100% - var(--mgla-przejscie) * 0.4167),
    rgb(0 0 0 / 0.259) calc(100% - var(--mgla-przejscie) * 0.3333),
    rgb(0 0 0 / 0.156) calc(100% - var(--mgla-przejscie) * 0.2500),
    rgb(0 0 0 / 0.074) calc(100% - var(--mgla-przejscie) * 0.1667),
    rgb(0 0 0 / 0.020) calc(100% - var(--mgla-przejscie) * 0.0833),
    transparent calc(100% - var(--mgla-przejscie) * 0.0000));
  mask-image: linear-gradient(180deg,
    transparent calc(var(--mgla-przejscie) * 0.0000),
    rgb(0 0 0 / 0.020) calc(var(--mgla-przejscie) * 0.0833),
    rgb(0 0 0 / 0.074) calc(var(--mgla-przejscie) * 0.1667),
    rgb(0 0 0 / 0.156) calc(var(--mgla-przejscie) * 0.2500),
    rgb(0 0 0 / 0.259) calc(var(--mgla-przejscie) * 0.3333),
    rgb(0 0 0 / 0.376) calc(var(--mgla-przejscie) * 0.4167),
    rgb(0 0 0 / 0.500) calc(var(--mgla-przejscie) * 0.5000),
    rgb(0 0 0 / 0.624) calc(var(--mgla-przejscie) * 0.5833),
    rgb(0 0 0 / 0.741) calc(var(--mgla-przejscie) * 0.6667),
    rgb(0 0 0 / 0.844) calc(var(--mgla-przejscie) * 0.7500),
    rgb(0 0 0 / 0.926) calc(var(--mgla-przejscie) * 0.8333),
    rgb(0 0 0 / 0.980) calc(var(--mgla-przejscie) * 0.9167),
    #000 calc(var(--mgla-przejscie) * 1.0000),
    #000 calc(100% - var(--mgla-przejscie) * 1.0000),
    rgb(0 0 0 / 0.980) calc(100% - var(--mgla-przejscie) * 0.9167),
    rgb(0 0 0 / 0.926) calc(100% - var(--mgla-przejscie) * 0.8333),
    rgb(0 0 0 / 0.844) calc(100% - var(--mgla-przejscie) * 0.7500),
    rgb(0 0 0 / 0.741) calc(100% - var(--mgla-przejscie) * 0.6667),
    rgb(0 0 0 / 0.624) calc(100% - var(--mgla-przejscie) * 0.5833),
    rgb(0 0 0 / 0.500) calc(100% - var(--mgla-przejscie) * 0.5000),
    rgb(0 0 0 / 0.376) calc(100% - var(--mgla-przejscie) * 0.4167),
    rgb(0 0 0 / 0.259) calc(100% - var(--mgla-przejscie) * 0.3333),
    rgb(0 0 0 / 0.156) calc(100% - var(--mgla-przejscie) * 0.2500),
    rgb(0 0 0 / 0.074) calc(100% - var(--mgla-przejscie) * 0.1667),
    rgb(0 0 0 / 0.020) calc(100% - var(--mgla-przejscie) * 0.0833),
    transparent calc(100% - var(--mgla-przejscie) * 0.0000));
}
.sekcja-mgla-tlo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(9px) saturate(0.9);
  transform: scale(1.08);
}
.sekcja-mgla-tlo::after {
  content: ''; position: absolute; inset: 0;
  background: rgb(var(--turkus-ciemny-rgb) / 0.82);
}


/* W sekcjach z ciemną mgłą tłem jest zdjęcie, a nie jednolity kolor.
   Pomiar w nagłówkach pokazał, że mały turkusowy tekst nad jasnymi
   fragmentami kadru nie przechodzi normy nawet przy gęstej mgle (3.6
   przy wymaganych 4.5), więc drobne akcenty są tu jasne. Turkus zostaje
   w kursywach tytułów i znakach plusa w FAQ - duże elementy mają próg 3.0. */
.sekcja-mgla--ciemna .section-tag,
.sekcja-mgla--ciemna .link-more,
.sekcja-mgla--ciemna .usluga-num,
.sekcja-mgla--ciemna .usluga-tag,
.sekcja-mgla--ciemna .wyroz-accent { color: rgb(var(--tekst-rgb) / 1); }
.sekcja-mgla--ciemna .section-tag::before { background: rgb(var(--tekst-rgb) / 0.5); }
.sekcja-mgla--ciemna .link-more { border-color: rgb(var(--tekst-rgb) / 0.5); }
.sekcja-mgla--ciemna p,
.sekcja-mgla--ciemna li,
.sekcja-mgla--ciemna .section-intro p,
.sekcja-mgla--ciemna .usluga-card p,
.sekcja-mgla--ciemna .wyroz-item p,
.sekcja-mgla--ciemna .faq details > *:not(summary) { color: rgb(var(--tekst-rgb) / 1); }
/* Karty z delikatnym tłem po najechaniu: na zdjęciu tło karty musi być
   trochę gęstsze, inaczej podświetlenie ginie w fakturze kadru. */
.sekcja-mgla--ciemna .usluga-card:hover,
.sekcja-mgla--ciemna .wyroz-item:hover { background: rgb(var(--turkus-ciemny-rgb) / 0.45); }


/* Kontakt na stronie głównej w mgle: etykiety danych i linki są tu małe,
   a pod nimi jest zdjęcie - turkus by nie przeszedł normy, więc są jasne. */
.sekcja-mgla--ciemna .kontakt-dane dt,
.sekcja-mgla--ciemna .kontakt-lead a,
.sekcja-mgla--ciemna .mapa-link,
.sekcja-mgla--ciemna .zgoda a { color: rgb(var(--tekst-rgb) / 1); }
/* Pola formularza są prawie przezroczyste; na rozmytym zdjęciu dostają
   gęstsze tło, żeby ramka formularza była czytelna jako całość. */
.sekcja-mgla--ciemna .pole input,
.sekcja-mgla--ciemna .pole select,
.sekcja-mgla--ciemna .pole textarea { background: rgb(var(--turkus-ciemny-rgb) / 0.6); }


/* ============================================================
   DITHERING PRZEJŚĆ
   Przy dużym skoku jasności na krótkim odcinku (piasek w ciemny las,
   zdjęcie nagłówka w tło strony) monitor ma za mało odcieni pośrednich
   i gradient rozpada się na widoczne schodki. Delikatny szum w strefie
   przejścia rozbija te schodki - oko widzi płynne przejście zamiast pasów.
   Szum jest tylko tam, gdzie jest przejście, i sam wygasa na brzegach,
   żeby nie było widać, gdzie się zaczyna.
   ============================================================ */
:root { --szum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.sekcja-mgla::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--szum);
  opacity: 0.09; mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 calc(var(--mgla-przejscie) * 0.15),
    #000 calc(var(--mgla-przejscie) * 1.05), transparent calc(var(--mgla-przejscie) * 1.35),
    transparent calc(100% - var(--mgla-przejscie) * 1.35), #000 calc(100% - var(--mgla-przejscie) * 1.05),
    #000 calc(100% - var(--mgla-przejscie) * 0.15), transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0, #000 calc(var(--mgla-przejscie) * 0.15),
    #000 calc(var(--mgla-przejscie) * 1.05), transparent calc(var(--mgla-przejscie) * 1.35),
    transparent calc(100% - var(--mgla-przejscie) * 1.35), #000 calc(100% - var(--mgla-przejscie) * 1.05),
    #000 calc(100% - var(--mgla-przejscie) * 0.15), transparent 100%);
}
.page-hero .hero-foto::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  z-index: 3; pointer-events: none;
  background-image: var(--szum);
  opacity: 0.08; mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 80%, transparent 100%);
}
.cta-section { position: relative; isolation: isolate; }
.cta-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--szum);
  opacity: 0.07; mix-blend-mode: overlay;
}

/* Link do ustawień ciasteczek w stopce - przycisk wyglądający jak pozostałe
   odnośniki w tej linii. */
.footer-ciasteczka {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: none; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit;
  color: rgb(var(--tekst-rgb) / var(--a-tekst-2));
  border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.2);
}
.footer-ciasteczka:hover { color: var(--krem); }


/* ============================================================
   TELEFON - SMUKLEJSZA WERSJA
   Strona na telefonie miała 15-16 ekranów przewijania, głównie przez
   duże marginesy przeniesione z wersji na komputer i galerie w jednej
   kolumnie. Treść i kolejność zostają te same - zmienia się tylko
   gęstość. Blok stoi na końcu pliku, żeby wygrywał z wcześniejszymi
   regułami dla 900 px.
   ============================================================ */
@media (max-width: 600px) {
  section { padding: 56px 0; }
  :root { --mgla-przejscie: 96px; }

  /* Galerie w dwóch kolumnach - w jednej galeria ślubna zajmowała 5 ekranów. */
  .galeria-grid { grid-template-columns: 1fr 1fr; }
  .karta-overlay { padding: 10px; }

  /* Karty usług i kroków: bez bocznych marginesów, gęstszy rytm. */
  .usluga-card { padding: 24px 0; border-right: 0; }
  .usluga-num { margin-bottom: 10px; }
  .usluga-card h3 { font-size: 20px; margin-bottom: 8px; }
  .usluga-tag { margin-top: 14px; }
  .wyroz-item { padding: 16px 0; }
  .section-intro { margin-bottom: 28px; }
  .link-more { margin-top: 24px; }

  /* O mnie: zdjęcie zajmowało cały ekran. Niższy kadr, twarz i kwiaty
     zostają w polu widzenia. */
  .o-kasi-inner { gap: 28px; }
  .o-kasi-img { aspect-ratio: 4 / 5; max-height: 64vh; }
  .o-kasi-img::after { display: none; }
  .o-kasi-foto { aspect-ratio: auto; height: 100%; object-position: 50% 28%; }

  /* Przyciski: jedna szerokość, jeden pod drugim - wcześniej każdy miał
     inną szerokość i całość wyglądała przypadkowo. */
  .cta-actions, .hero-actions, .page-hero-actions {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .cta-actions > *, .hero-actions > *, .page-hero-actions > * {
    width: 100%; text-align: center; padding: 14px 18px;
  }
  .cta-actions { max-width: 360px; margin: 0 auto; }

  /* Sekcja na dole strony. */
  .cta-section { padding: 64px 22px; }
  .cta-section h2 { font-size: 34px; margin-bottom: 16px; }
  .cta-section p { font-size: 14px; margin-bottom: 28px; }

  /* Mapa przed wczytaniem: zwarta karta zamiast pustego prostokąta 4:3. */
  .mapa-ramka:not(.mapa-ramka--wczytana) { aspect-ratio: auto; padding: 22px 18px; gap: 10px; }

  /* Stopka: mniej powietrza, dolny pasek wyrównany do lewej jak reszta,
     linki prawne w jednej linii zamiast rozciągniętej kolumny. */
  footer { padding: 40px 0 24px; }
  .footer-inner { gap: 20px; }
  .footer-col-title { margin-bottom: 8px; }
  .footer-col p, .footer-col a { line-height: 1.6; }
  .footer-bottom { text-align: left; align-items: flex-start; gap: 8px; margin-top: 18px; }
  .footer-prawne { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
  .footer-kropka { display: inline; }
  .footer-podpis { flex-basis: 100%; margin-top: 4px; }
  /* Podpis idzie do osobnej linii, więc kropka przed nim jest zbędna.
     Margines zerujemy, bo reguła dla kropek (span w .footer-prawne) łapie
     też podpis i wcinała go o 8 px. */
  .footer-kropka:has(+ .footer-podpis) { display: none; }
  .footer-prawne .footer-podpis { margin: 4px 0 0; }

  /* Dane kontaktowe: zwarta lista. Numer telefonu zostaje wyróżniony,
     tylko w rozsądnym rozmiarze. */
  .kontakt-lead { margin-bottom: 24px; }
  .kontakt-dane dt { padding-top: 14px; margin-bottom: 4px; }
  .kontakt-dane dd { padding-bottom: 14px; }
  .kontakt-dane dd.kontakt-telefon { padding-bottom: 14px; }
  .kontakt-dane dd.kontakt-telefon a { font-size: 26px; }
  .kontakt-inner { gap: 32px; }

  /* Formularz: mniejsze wewnętrzne marginesy ramki i odstępy między polami. */
  .form-kontakt { padding: 24px 18px; }
  .pole { margin-bottom: 16px; }
}


/* ============================================================
   FILM W NAGŁÓWKU STRONY GŁÓWNEJ
   Film jest pionowy. Na telefonie mieści się prawie cały, na
   komputerze widać jego górną część: las i pole w rozmyciu. To
   dobrze, bo ta część jest nieostra z natury - przy powiększeniu
   nie widać, że film ma tylko 720 px szerokości.
   ============================================================ */
.hero-video { object-position: 50% 50%; }
@media (min-width: 901px) {
  .hero-video { object-position: 50% 16%; }
}
.hero-pauza {
  /* Prawy górny róg, pod paskiem menu (72 px) - prawy dolny zajmuje
     podpis z Instagramem. */
  position: absolute; right: 20px; top: 92px; z-index: 3;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgb(var(--czern-rgb) / 0.45);
  border: 1px solid rgb(var(--tekst-rgb) / 0.35); border-radius: 999px;
  color: var(--krem);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-pauza:hover { background: rgb(var(--czern-rgb) / 0.7); border-color: var(--krem); }
.hero-pauza[hidden] { display: none; }
.hero-pauza svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-pauza .ikona-graj { display: none; fill: currentColor; stroke: none; }
.hero-pauza--zatrzymany .ikona-pauza { display: none; }
.hero-pauza--zatrzymany .ikona-graj { display: inline; }


/* ============================================================
   WYLEW ZDJĘCIA NA SĄSIEDNIE SEKCJE
   Wariant sekcji z mgłą, w którym zdjęcie nie kończy się na jej
   krawędzi, tylko wchodzi na sekcje obok i tam gaśnie. Użyty przy
   opiniach na stronie głównej (wianek wchodzi na „Dlaczego
   kasiawlesie" i na Instagram).

   Zdjęcie leży nad tłem sąsiadów, ale pod ich treścią: treść
   sąsiednich sekcji jest podniesiona wyżej, więc wylew nigdy nie
   przykrywa tekstu. Mgła ma kolor głębokiej zieleni, tak jak tło
   obu sąsiadów, więc przejście nie zmienia barwy.
   ============================================================ */
.sekcja-mgla--wylew {
  --wylew: 150px;
  padding-top: 130px; padding-bottom: 130px;
}
@media (max-width: 900px) {
  .sekcja-mgla--wylew { --wylew: 100px; padding-top: 96px; padding-bottom: 96px; }
}
.sekcja-mgla--wylew .sekcja-mgla-tlo {
  top: calc(-1 * var(--wylew)); bottom: calc(-1 * var(--wylew));
  -webkit-mask-image: linear-gradient(180deg,
    transparent calc(var(--wylew) * 0.000),
    rgb(0 0 0 / 0.028) calc(var(--wylew) * 0.150),
    rgb(0 0 0 / 0.104) calc(var(--wylew) * 0.300),
    rgb(0 0 0 / 0.216) calc(var(--wylew) * 0.450),
    rgb(0 0 0 / 0.352) calc(var(--wylew) * 0.600),
    rgb(0 0 0 / 0.500) calc(var(--wylew) * 0.750),
    rgb(0 0 0 / 0.648) calc(var(--wylew) * 0.900),
    rgb(0 0 0 / 0.784) calc(var(--wylew) * 1.050),
    rgb(0 0 0 / 0.896) calc(var(--wylew) * 1.200),
    rgb(0 0 0 / 0.972) calc(var(--wylew) * 1.350),
    #000 calc(var(--wylew) * 1.500),
    #000 calc(100% - var(--wylew) * 1.500),
    rgb(0 0 0 / 0.972) calc(100% - var(--wylew) * 1.350),
    rgb(0 0 0 / 0.896) calc(100% - var(--wylew) * 1.200),
    rgb(0 0 0 / 0.784) calc(100% - var(--wylew) * 1.050),
    rgb(0 0 0 / 0.648) calc(100% - var(--wylew) * 0.900),
    rgb(0 0 0 / 0.500) calc(100% - var(--wylew) * 0.750),
    rgb(0 0 0 / 0.352) calc(100% - var(--wylew) * 0.600),
    rgb(0 0 0 / 0.216) calc(100% - var(--wylew) * 0.450),
    rgb(0 0 0 / 0.104) calc(100% - var(--wylew) * 0.300),
    rgb(0 0 0 / 0.028) calc(100% - var(--wylew) * 0.150),
    transparent calc(100% - var(--wylew) * 0.000));
  mask-image: linear-gradient(180deg,
    transparent calc(var(--wylew) * 0.000),
    rgb(0 0 0 / 0.028) calc(var(--wylew) * 0.150),
    rgb(0 0 0 / 0.104) calc(var(--wylew) * 0.300),
    rgb(0 0 0 / 0.216) calc(var(--wylew) * 0.450),
    rgb(0 0 0 / 0.352) calc(var(--wylew) * 0.600),
    rgb(0 0 0 / 0.500) calc(var(--wylew) * 0.750),
    rgb(0 0 0 / 0.648) calc(var(--wylew) * 0.900),
    rgb(0 0 0 / 0.784) calc(var(--wylew) * 1.050),
    rgb(0 0 0 / 0.896) calc(var(--wylew) * 1.200),
    rgb(0 0 0 / 0.972) calc(var(--wylew) * 1.350),
    #000 calc(var(--wylew) * 1.500),
    #000 calc(100% - var(--wylew) * 1.500),
    rgb(0 0 0 / 0.972) calc(100% - var(--wylew) * 1.350),
    rgb(0 0 0 / 0.896) calc(100% - var(--wylew) * 1.200),
    rgb(0 0 0 / 0.784) calc(100% - var(--wylew) * 1.050),
    rgb(0 0 0 / 0.648) calc(100% - var(--wylew) * 0.900),
    rgb(0 0 0 / 0.500) calc(100% - var(--wylew) * 0.750),
    rgb(0 0 0 / 0.352) calc(100% - var(--wylew) * 0.600),
    rgb(0 0 0 / 0.216) calc(100% - var(--wylew) * 0.450),
    rgb(0 0 0 / 0.104) calc(100% - var(--wylew) * 0.300),
    rgb(0 0 0 / 0.028) calc(100% - var(--wylew) * 0.150),
    transparent calc(100% - var(--wylew) * 0.000));
}
.sekcja-mgla--wylew + section > .container,
section:has(+ .sekcja-mgla--wylew) > .container { position: relative; z-index: 2; }

/* ──────────────────────────────────────────────────────────────────────
   Kontrast drobnych elementów (uwaga Kasi, październik 2026).
   Te same kolory, mniej przezroczystości: menu, małe etykiety i przyciski
   były przygaszone (menu miało krycie 0,6). Najmniejsze napisy dostają
   grubość 400 zamiast 300 - przy 10-12 px cienki krój optycznie ciemnieje.
   ────────────────────────────────────────────────────────────────────── */
:root {
  --a-tekst: 0.95;
  --a-tekst-2: 0.84;
}
.nav-links a,
.nav-rozwin,
.nav-strzalka { opacity: 0.9; font-weight: 400; }
.hero-tag { opacity: 0.92; }
.section-tag,
.hero-tag,
.stat-label,
.usluga-tag,
.karta-cat,
.footer-prawne,
.pole label { font-weight: 400; }
.btn-primary,
.btn-ghost,
.nav-cta,
.link-more { font-weight: 400; }
.btn-ghost { border-color: rgb(var(--turkus-jasny-rgb) / 0.55); }
.nav-cta { border-color: rgb(var(--turkus-jasny-rgb) / 0.6); }
.pole-opcjonalne { opacity: 0.78; }

/* ──────────────────────────────────────────────────────────────────────
   „O mnie": zdjęcie wtopione w sekcję zamiast prostokąta z ramką.
   Krawędzie gasną w tło sekcji tą samą łagodną krzywą (smoothstep), co
   przejścia mgły - bez widocznych pasów. Od strony tekstu przejście jest
   dłuższe, żeby zdjęcie i tekst czytały się jako jedna kompozycja.
   Dwie maski (pion i poziom) przecinają się, więc rogi gasną najmocniej.
   ────────────────────────────────────────────────────────────────────── */
.o-kasi-img:has(.o-kasi-foto) {
  background: transparent;
  overflow: visible;
  /* Zdjęcie większe niż kolumna: zejścia wypadają na marginesie
     i w odstępie od tekstu, a nie zjadają kadru z Kasią. */
  margin: -4% -14% -4% -8%;
}
.o-kasi-img:has(.o-kasi-foto)::after { display: none; }
.o-kasi-img .o-kasi-foto {
  /* Lekko przygaszone i chłodniejsze - ciepłe, nasycone zdjęcie
     na grafitowym tle wyglądało jak doklejone z innej strony. */
  filter: saturate(0.86) brightness(0.93);
  --poziom: linear-gradient(90deg,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.03) 1%, rgb(0 0 0 / 0.16) 2.5%, rgb(0 0 0 / 0.5) 5%,
    rgb(0 0 0 / 0.84) 7.5%, rgb(0 0 0 / 0.97) 9.5%, #000 11%,
    #000 64%, rgb(0 0 0 / 0.97) 68%, rgb(0 0 0 / 0.84) 74%, rgb(0 0 0 / 0.5) 83%,
    rgb(0 0 0 / 0.16) 91%, rgb(0 0 0 / 0.03) 97%, rgb(0 0 0 / 0) 100%);
  --pion: linear-gradient(180deg,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.03) 1%, rgb(0 0 0 / 0.16) 2.5%, rgb(0 0 0 / 0.5) 4.5%,
    rgb(0 0 0 / 0.84) 6.5%, rgb(0 0 0 / 0.97) 8.5%, #000 10%,
    #000 78%, rgb(0 0 0 / 0.97) 82%, rgb(0 0 0 / 0.84) 86.5%, rgb(0 0 0 / 0.5) 92%,
    rgb(0 0 0 / 0.16) 96.5%, rgb(0 0 0 / 0.03) 99%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: var(--poziom), var(--pion);
  -webkit-mask-composite: source-in;
  mask-image: var(--poziom), var(--pion);
  mask-composite: intersect;
}

/* Telefon: zdjęcie na całą szerokość nad tekstem - gaśnie głównie
   góra i dół, boki tylko delikatnie. */
@media (max-width: 900px) {
  .o-kasi-img:has(.o-kasi-foto) { margin: -12px -24px 0; }
  .o-kasi-img .o-kasi-foto {
    --poziom: linear-gradient(90deg,
      rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.16) 2%, rgb(0 0 0 / 0.6) 5%, rgb(0 0 0 / 0.93) 8%, #000 10%,
      #000 90%, rgb(0 0 0 / 0.93) 92%, rgb(0 0 0 / 0.6) 95%, rgb(0 0 0 / 0.16) 98%, rgb(0 0 0 / 0) 100%);
    --pion: linear-gradient(180deg,
      rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.16) 3%, rgb(0 0 0 / 0.6) 7%, rgb(0 0 0 / 0.93) 11%, #000 14%,
      #000 78%, rgb(0 0 0 / 0.93) 83%, rgb(0 0 0 / 0.6) 89%, rgb(0 0 0 / 0.16) 96%, rgb(0 0 0 / 0) 100%);
  }
}

/* Cele dotykowe min. 24 px (WCAG 2.2, 2.5.8): linki w dolnym pasku
   stopki i pole zgody były niższe. Wysokość rośnie przez odstęp
   wewnętrzny, więc układ stopki się nie zmienia. */
.footer-prawne a,
.podpis-yourise { display: inline-block; padding-block: 3px; min-height: 24px; }
.pole label.zgoda input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; }
.pole label.zgoda input[type="checkbox"] { margin-top: -3px; }
.pole label.zgoda input[type="checkbox"]:checked::after { width: 6px; height: 11px; margin-top: 4px; border-width: 0 2px 2px 0; }

/* Film w nagłówku podstrony: wygląda jak zdjęcie (mgła, rozmycie),
   tylko się porusza. Ogólna reguła .hero-video stawia go nad mgłą. */
.page-hero .hero-video { z-index: auto; }

/* ──────────────────────────────────────────────────────────────────────
   Oferta ślubna: cennik jako lista (nazwa + cena w linii, opis pod spodem)
   i dwa zdjęcia obok. Lista zamiast tabeli, bo na telefonie trzy kolumny
   z długim opisem byłyby nieczytelne.
   ────────────────────────────────────────────────────────────────────── */
.oferta-uklad { display: grid; grid-template-columns: 7fr 4fr; gap: 64px; align-items: start; margin-top: 8px; }
.oferta-uklad--bez-zdjec { grid-template-columns: 1fr; max-width: 820px; }
.cennik-lista { list-style: none; margin: 0; padding: 0; }
.cennik-pozycja { padding: 22px 0; border-bottom: 1px solid rgb(var(--turkus-jasny-rgb) / 0.16); }
.cennik-pozycja:first-child { padding-top: 4px; }
.cennik-pozycja:last-child { border-bottom: 0; }
.cennik-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.cennik-nazwa { font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.25; color: var(--krem); margin: 0; }
.cennik-cena { flex-shrink: 0; font-size: 14px; font-weight: 400; letter-spacing: 0.04em; color: var(--turkus-jasny); white-space: nowrap; }
.cennik-opis { margin: 8px 0 0; font-size: 14px; line-height: 1.75; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); max-width: 620px; }
.oferta-zdjecia { display: grid; gap: 20px; position: sticky; top: 104px; }
.oferta-zdjecie { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.bg-piasek .cennik-pozycja { border-bottom-color: var(--jasna-linia); }
.bg-piasek .cennik-nazwa { color: var(--jasna-tytul); }
.bg-piasek .cennik-cena { color: var(--jasna-akcent); }
.bg-piasek .cennik-opis { color: var(--jasna-tekst-2); }

/* Trzy liczby z „Jak to działa?" - zadatek, moodboard, montaż. */
.oferta-fakty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 48px; }
.oferta-fakt { padding: 26px 24px; border: 1px solid rgb(var(--turkus-jasny-rgb) / 0.2); background: rgb(var(--turkus-ciemny-rgb) / 0.35); }
.oferta-fakt-liczba { display: block; font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--krem); margin-bottom: 10px; }
.oferta-fakt-opis { display: block; font-size: 13px; line-height: 1.6; color: rgb(var(--tekst-rgb) / var(--a-tekst-2)); }
.oferta-proza { max-width: 760px; }

/* ──────────────────────────────────────────────────────────────────────
   Oferta sezonowa.
   ────────────────────────────────────────────────────────────────────── */
.sezon-termin {
  display: inline-block; margin: -4px 0 18px; padding: 7px 14px;
  font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--czern); background: var(--turkus-jasny);
}
.sezon-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.sezon-produkt { background: #F7F4EE; display: flex; flex-direction: column; }
.sezon-foto { aspect-ratio: 4 / 5; overflow: hidden; }
.sezon-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sezon-tresc { padding: 20px 22px 24px; }
.bg-piasek .sezon-nazwa { font-family: var(--serif); font-size: 23px; font-weight: 400; margin: 0 0 6px; color: var(--jasna-tytul); }
.bg-piasek .sezon-cena { margin: 0 0 10px; font-size: 14px; font-weight: 400; letter-spacing: 0.04em; color: var(--jasna-akcent); }
.bg-piasek .sezon-opis { margin: 0; font-size: 14px; line-height: 1.7; color: var(--jasna-tekst-2); }

/* Przycisk oferty sezonowej w nagłówku strony głównej - jasny, żeby
   odróżniał się od dwóch stałych przycisków i nie wyglądał jak trzeci
   zwykły wybór. */
.btn-sezon {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--krem); color: var(--turkus);
  padding: 15px 30px; font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: background 0.25s, color 0.25s;
}
.btn-sezon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--turkus); }
.btn-sezon:hover { background: var(--turkus-jasny); color: var(--czern); }

@media (max-width: 900px) {
  .oferta-uklad { grid-template-columns: 1fr; gap: 36px; }
  .oferta-zdjecia { position: static; grid-template-columns: 1fr 1fr; gap: 12px; }
  .oferta-fakty { grid-template-columns: 1fr; gap: 12px; margin-bottom: 36px; }
  .sezon-siatka { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .cennik-glowa { flex-direction: column; gap: 4px; }
  .cennik-nazwa { font-size: 21px; }
  .sezon-siatka { grid-template-columns: 1fr; }
  .btn-sezon { width: 100%; justify-content: center; }
}
.sezon-foto--brak { display: flex; align-items: center; justify-content: center; background: rgb(var(--turkus-rgb) / 0.07); color: rgb(var(--turkus-rgb) / 0.45); }
.sezon-foto--brak svg { width: 34%; height: auto; }
/* Na telefonie karty stoją jedna pod drugą - nie ma czego wyrównywać,
   więc zamiast wysokiego pustego pola zostaje niski pasek z gałązką. */
@media (max-width: 600px) {
  .sezon-foto--brak { aspect-ratio: 3 / 1; }
  .sezon-foto--brak svg { width: auto; height: 60%; }
}

/* Opis oferty sezonowej: tekst z edytora (akapity, listy, pogrubienia). */
.sezon-opis-sam { max-width: 760px; }
.sezon-opis-tekst p, .sezon-opis-tekst li { font-size: 15px; line-height: 1.85; color: rgb(var(--tekst-rgb) / var(--a-tekst)); }
.sezon-opis-tekst p { margin: 0 0 18px; }
.sezon-opis-tekst ul, .sezon-opis-tekst ol { margin: 0 0 18px; padding-left: 20px; }
.sezon-opis-tekst li { margin-bottom: 6px; }
.sezon-opis-tekst li::marker { color: var(--turkus-jasny); }
.sezon-opis-tekst strong, .sezon-opis-tekst b { font-weight: 500; color: var(--krem); }
.sezon-opis-tekst a { color: var(--turkus-jasny); }