/* =========================================================================
   MÓJ DOM — system projektowy
   Kierunek: editorial / architektoniczny, ciepłe naturalne barwy
   Harmonia: monochromatyczna zieleń + jeden ostry akcent mosiądzu (60-30-10)
   ========================================================================= */

:root {
  /* --- kolor: biel + czerń + jeden ostry akcent złota (60-30-10) ------- */
  /* Ziemista baza: ciepły krem i piasek zamiast chłodnej bieli. Czerń
     i mosiądz zostają (z logo), tylko czerń dostaje ciepły, kawowy odcień. */
  --bone:          oklch(0.974 0.009 80);
  --bone-deep:     oklch(0.938 0.015 76);
  /* hue 90 (nie 0) mimo chroma 0: color-mix(in oklch, ...) interpoluje kanal
     odcienia liczbowo, wiec biel o hue 0 mieszana z mosiadzem (hue 88) dawala
     rozowy nalot przy malych procentach. Hue 90 trzyma domieszki w zlocie. */
  --paper:         oklch(0.993 0.005 82);

  /* "--forest*" nazwy zachowane (architektura tokenów bez zmian),
     wartości: ciepła, kawowa czerń zamiast neutralnej. */
  --forest:        oklch(0.215 0.012 60);
  --forest-lift:   oklch(0.300 0.015 60);
  --forest-deep:   oklch(0.155 0.010 58);
  --forest-ink:    oklch(0.115 0.008 55);

  --brass:         oklch(0.724 0.132 88);
  --brass-lift:    oklch(0.790 0.126 88);
  --brass-deep:    oklch(0.510 0.118 82);

  --ink:           oklch(0.185 0.012 60);
  --muted:         oklch(0.470 0.018 65);
  --muted-soft:    oklch(0.530 0.016 68);

  --bg:            var(--bone);
  --surface:       var(--paper);
  --surface-2:     var(--bone-deep);
  --text:          var(--ink);
  --primary:       var(--forest);
  --accent:        var(--brass);

  --line:          color-mix(in oklch, var(--ink) 14%, transparent);
  --line-soft:     color-mix(in oklch, var(--ink) 8%, transparent);
  --line-strong:   color-mix(in oklch, var(--ink) 26%, transparent);

  --on-dark:       oklch(0.965 0.010 80);
  --on-dark-muted: oklch(0.745 0.014 75);

  /* --- cień (tonowany ciepłym brązem, nie czystą czernią) --------------- */
  /* Trzy stopnie, każdy z dwóch warstw (krótka przy krawędzi + długa,
     miękka), ten sam ciepły brąz. 1 = spoczynek (karty, przyciski, kadry),
     2 = uniesienie (najechanie, przyklejony pasek, panele), 3 = to, co
     unosi się nad stroną (menu, arkusz filtrów, czat, zgody, dialogi).
     Najechanie podnosi o JEDEN stopień — 1 → 2, nigdy 1 → 3. */
  --shadow-tint: oklch(0.24 0.03 58);
  --shadow-1: 0 1px 2px color-mix(in oklch, var(--shadow-tint) 6%, transparent), 0 3px 10px color-mix(in oklch, var(--shadow-tint) 5%, transparent);
  --shadow-2: 0 2px 6px color-mix(in oklch, var(--shadow-tint) 6%, transparent), 0 14px 32px color-mix(in oklch, var(--shadow-tint) 9%, transparent);
  --shadow-3: 0 6px 16px color-mix(in oklch, var(--shadow-tint) 8%, transparent), 0 26px 60px color-mix(in oklch, var(--shadow-tint) 14%, transparent);
  /* Pasek przyklejony u góry: cień tylko w dół, bez twardej krawędzi. */
  --shadow-bar: 0 1px 0 color-mix(in oklch, var(--shadow-tint) 5%, transparent), 0 12px 28px -14px color-mix(in oklch, var(--shadow-tint) 18%, transparent);
  /* Jasna krawędź u góry kart na papierze — „światło z góry". */
  --highlight: inset 0 1px 0 color-mix(in oklch, var(--paper) 75%, transparent);
  /* Pierścień fokusu pól formularza — jeden dla wszystkich. */
  --ring: 0 0 0 3px color-mix(in oklch, var(--brass) 26%, transparent);
  /* błąd walidacji — ceglasty, w tej samej ziemistej rodzinie */
  --danger: oklch(0.55 0.15 32);

  /* --- typografia ------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", "Segoe UI", Helvetica, sans-serif;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.34vw, 1.4rem);
  --step-2:  clamp(1.55rem, 1.40rem + 0.75vw, 2rem);
  --step-3:  clamp(1.95rem, 1.65rem + 1.5vw, 2.85rem);
  --step-4:  clamp(2.4rem, 1.85rem + 2.75vw, 4rem);
  --step-5:  clamp(2.5rem, 1.5rem + 5vw, 6.4rem);

  /* --- rytm przestrzenny 4 / 8 / 16 / 32 / 64 / 128 -------------------- */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 1rem;   --s4: 2rem;
  --s5: 4rem;    --s6: 8rem;    --s7: 12rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 68ch;
  /* jedna wysokosc dla wszystkich kontrolek paska filtrow (input/select/przycisk) */
  --control-pad-y: 0.85em;
  --radius: 0;
  --radius-lg: 0;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   podstawy
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Nagłówek jest fixed — bez tego skok do #proces chowa nagłówek sekcji pod paskiem.
   Sam scroll-margin, bez scroll-padding na html — inaczej oba odstępy się sumują. */
section[id], [id^="faq-p-"] { scroll-margin-top: 6.5rem; }

body {
  /* tło niesie <html> (niżej) — body przezroczyste, żeby go nie zakrywać */
  background: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ziarno + subtelny gradient — tło nigdy nie jest płaskie.
   Na płótnie dokumentu (tło <html>), nie na warstwach position: fixed:
   tamte miały wysokość jednego ekranu, więc na zrzucie całej strony
   (i przy każdym renderze „poza ekranem") ciepły gradient urywał się
   twardą krawędzią ~900 px od góry, a ziarno ~1350 px. Teraz górny blask
   jest przypięty do początku dokumentu, dolny do końca, a ziarno kafelkuje
   całą wysokość — tło jest jednym, ciągłym arkuszem. Przy okazji znikają
   dwie stałe warstwy GPU wielkości 2×2 ekranu (telefon). */
html {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"),
    radial-gradient(130vw 110svh at 12% 0%, color-mix(in oklch, var(--forest) 7%, transparent) 0%, transparent 62%),
    radial-gradient(110vw 90svh at 100% 100%, color-mix(in oklch, var(--brass) 6%, transparent) 0%, transparent 62%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 140px 140px, auto, auto;
}

main, .site-header, .site-footer { position: relative; z-index: 1; }

img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
  border-radius: 0;
}
::selection { background: var(--brass); color: var(--forest-ink); }

.skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 200;
  background: var(--forest); color: var(--on-dark);
  padding: var(--s2) var(--s3); border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip:focus { top: var(--s3); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   układ
   ========================================================================= */
.wrap { width: min(100% - var(--gutter) * 2, 1320px); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, 860px); margin-inline: auto; }
/* rytm: min. 72px mobile / min. 120px desktop */
.section { padding-block: clamp(3rem, 8vw, 4rem); }
@media (min-width: 1024px) { .section { padding-block: clamp(4rem, 5vw, 5rem); } }
.section--tight { padding-block: clamp(var(--s4), 6vw, var(--s5)); }

/* Tonowane pasmo — odrobinę ciemniejszy odcień tego samego papieru.
   Rozbija 6000 px jednolitego tła na rytm sekcji bez skoku do czerni. */
.section--tone { background: color-mix(in oklch, var(--bone-deep) 70%, var(--bone)); }
.section--flushTop { padding-top: clamp(2.75rem, 5vw, 4rem); }

/* -------------------------------------------------- siatka 12 kolumn
   Jedna linia drugiej kolumny dla całej strony: początek kolumny 7.
   Na niej stoją lead nagłówków, lista FAQ, formularz kontaktu, prawa
   kolumna usług i prawe karty polecanych ofert. */
:root { --gcol: clamp(1rem, 2.4vw, 2.5rem); }

.shead {
  position: relative;
  display: grid; gap: 0.75rem;
  padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
/* Kreska nad nagłówkiem — osobny element, żeby mogła się rysować
   (scaleX) niezależnie od wejścia samego tekstu. */
.shead__rule {
  position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line-strong);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out);
}
.shead__main { display: grid; gap: clamp(0.5rem, 1.2vw, 0.9rem); }
.eyebrow {
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--muted);
}
.eyebrow--num { color: var(--brass-deep); font-variant-numeric: tabular-nums; }
/* Znak marki nad nagłówkiem (Porady) — ten sam rysunek co kicker w hero:
   krótka mosiężna kreska i „MÓJ DOM” kapitalikami. */
.kicker {
  display: flex; align-items: center; gap: 0.75em;
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-deep);
}
.kicker::before { content: ""; width: clamp(1.75rem, 3vw, 2.75rem); height: 1px; background: var(--brass); flex: none; }
.shead h2 { font-size: clamp(2.1rem, 1.55rem + 2.3vw, 3.5rem); max-width: 16ch; hyphens: manual; }
.shead h2 em, .listings__head h2 em, .porady-band h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.shead__side { display: grid; gap: var(--s3); align-content: end; justify-items: start; }
.shead__lead { color: var(--muted); max-width: 46ch; font-size: var(--step-1); line-height: 1.6; }
.shead__lead strong { color: var(--text); font-weight: 600; }
.shead__action { margin-top: 0.25rem; }

@media (min-width: 960px) {
  .shead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); align-items: start; }
  .shead__main { grid-column: 1 / 7; }
  .shead__side { grid-column: 7 / -1; padding-top: clamp(0.35rem, 0.8vw, 0.7rem); }
  .shead:not(:has(.shead__side)) .shead__main { grid-column: 1 / -1; }
  /* Wariant „stack": nagłówek sam jest lewą kolumną układu. */
  .shead--stack { grid-template-columns: 1fr; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
  .shead--stack .shead__main, .shead--stack .shead__side { grid-column: 1 / -1; }
  .shead--stack .shead__side { padding-top: 0; }
}
/* Maski linii ze SplitText: zapas na ogonki „ą ę g" i daszki „Ś Ó Ż". */
.split-line-mask { padding-block: 0.14em; margin-block: -0.14em; }
.motion [data-reveal]:not([data-in]) .shead__rule { transform: scaleX(0); }

/* =========================================================================
   przyciski i linki
   ========================================================================= */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--on-dark);
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.75em 1.5em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 0;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer; text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out),
              background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
/* Przy najechaniu kolor nie przeskakuje — jaśniejsza warstwa przesuwa się
   od lewej (transform), a strzałka dojeżdża 3 px. Wciśnięcie lekko
   zmniejsza przycisk, jak fizyczny klik. */
.btn { position: relative; isolation: isolate; overflow: hidden; --btn-sweep: var(--forest-lift); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.42s var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover { transform: translateY(var(--lift, -2px)); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); transition-duration: 80ms; }
.btn:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.28s var(--ease-out); }
.btn:hover svg:last-child, .btn:focus-visible svg:last-child { transform: translateX(var(--nudge, 3px)); }

.btn--accent { --btn-bg: var(--brass); --btn-fg: var(--forest-ink); --btn-sweep: var(--brass-lift); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line-strong); box-shadow: none; --btn-sweep: color-mix(in oklch, var(--forest) 8%, transparent); }
.btn--ghost:hover { border-color: color-mix(in oklch, var(--forest) 55%, transparent); box-shadow: var(--shadow-1); }

.btn--onDark { --btn-bg: var(--on-dark); --btn-fg: var(--forest-ink); --btn-sweep: var(--paper); }

.btn--ghostDark {
  /* Półprzezroczyste ciemne tło: na zdjęciu hero biały napis bez niego ginie. */
  --btn-bg: color-mix(in oklch, var(--forest-ink) 42%, transparent); --btn-fg: var(--on-dark); box-shadow: none; --btn-sweep: color-mix(in oklch, var(--on-dark) 12%, transparent);
  border-color: color-mix(in oklch, var(--on-dark) 42%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--ghostDark:hover { border-color: color-mix(in oklch, var(--on-dark) 70%, transparent); }
/* Na ciemnym tle (hero, pasma) mosiężny pierścień zamiast ciemnego. */
.btn--ghostDark:focus-visible, .btn--onDark:focus-visible, .dark-band .btn:focus-visible { outline-color: var(--brass-lift); }

.ulink {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: var(--step--1); letter-spacing: 0.02em;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.36s var(--ease-out);
}
.ulink:hover { background-size: 100% 1px; }
/* Link wpleciony w zdanie (bez ikony) nie moze wypadac z rytmu akapitu:
   dziedziczy rozmiar tekstu, a podkreslenie jest widoczne od razu — inaczej
   w srodku zdania nic go nie odroznia od zwyklego tekstu. */
.ulink:not(:has(svg)) {
  display: inline; font-size: inherit;
  background-size: 100% 1px;
  text-underline-offset: 3px;
}
.ulink:not(:has(svg)):hover { color: var(--brass-deep); }
.ulink svg { width: 0.9em; height: 0.9em; transition: transform 0.28s var(--ease-out); }
.ulink:hover svg, .ulink:focus-visible svg { transform: translateX(var(--nudge, 3px)); }
.ulink:focus-visible { background-size: 100% 1px; }

/* =========================================================================
   nagłówek strony — sygnatura + telefon + przełącznik menu
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: transform 0.4s var(--ease-out), background-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Trzy kolumny 1fr / auto / 1fr: menu stoi dokładnie na środku strony,
   niezależnie od tego, że logo i przycisk mają różne szerokości (flex ze
   space-between przesuwał je o 15 px w lewo). */
.site-header__in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s3); padding-block: clamp(0.75rem, 2vw, 1.15rem);
}
.site-header__in > .mark { justify-self: start; }
.site-header__in > .head-right { justify-self: end; }
@media (max-width: 899px) { .site-header__in { grid-template-columns: 1fr auto; } }
/* Pasek postępu czytania — cienka mosiężna linia pod nagłówkiem. */
.site-header__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
/* Gęste tło i bez podbijania nasycenia: przy 82% i saturate(1.4) rozmyty
   złoty przycisk „Szukaj" spod paska przebijał jako plama za „Kontakt". */
.site-header[data-stuck="true"] {
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line-soft);
  box-shadow: var(--shadow-bar);
}
.site-header[data-hidden="true"] { transform: translateY(-105%); }

/* Nad zdjeciem hero pasek zostaje widoczny, tylko traci tlo i przechodzi na
   jasna tresc. Wczesniej chowal sie do pierwszego scrolla, przez co pierwszy
   ekran — zwlaszcza na telefonie — nie mial ani znaku, ani menu, ani telefonu.
   Kontrast zapewnia gorna czesc scrimu hero (58% czerni u gory). */
.site-header--onHero[data-stuck="false"] {
  background: transparent; box-shadow: none; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--on-dark);
}
.site-header--onHero[data-stuck="false"] .site-nav a,
.site-header--onHero[data-stuck="false"] .menu-btn { color: var(--on-dark); }
.site-header--onHero[data-stuck="false"] .menu-btn { border-color: color-mix(in oklch, var(--on-dark) 42%, transparent); }
.site-header--onHero[data-stuck="false"] .menu-btn:hover { border-color: var(--brass); color: var(--brass); }
.site-header--onHero[data-stuck="false"] .head-cta { --cta-bg: var(--brass); --cta-fg: var(--forest-ink); }
.site-header--onHero[data-stuck="false"] .head-cta:hover { --cta-bg: var(--brass-lift); }
.site-header--onHero[data-stuck="false"] .mark__logo { filter: drop-shadow(0 2px 10px color-mix(in oklch, var(--forest-ink) 55%, transparent)); }

.mark { display: inline-flex; align-items: center; }
.mark__logo {
  height: clamp(42px, 5vw, 64px); width: auto;
  transition: transform 0.3s var(--ease-out);
}
.mark:hover .mark__logo { transform: translateY(-1px); }

/* Nawigacja główna — widoczna inline od tabletu wzwyż, na hero i tak cały
   pasek jest ukryty aż do pierwszego scrolla (patrz [data-hidden]). */
.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); list-style: none; padding: 0; }
.site-nav a {
  position: relative; font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.03em; color: var(--text);
  padding-block: 0.3rem;
}
/* Kreska rośnie od lewej i schodzi w prawo (jak warstwa w przyciskach);
   bieżąca zakładka ma ją na stałe — wiadomo, gdzie się jest. */
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brass-deep); transform: scaleX(0); transform-origin: right center;
  transition: transform 0.32s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.head-right {
  display: flex; align-items: center; gap: clamp(0.4rem, 1.5vw, 1rem);
  /* Numer telefonu zmieniał szerokość w chwili podmiany kroju i przesuwał
     cały prawy róg nagłówka. Cyfry tabelaryczne mają stałą szerokość
     znaku, więc napis zajmuje tyle samo miejsca przed i po. */
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .mark__logo { height: 40px; }
  .menu-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .menu-btn > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.head-cta {
  --cta-bg: var(--forest); --cta-fg: var(--on-dark);
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 40px; padding: 0.65em 1.5em;
  font-weight: 600; font-size: var(--step--1); letter-spacing: 0.03em;
  background: var(--cta-bg); color: var(--cta-fg);
  box-shadow: var(--shadow-1);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease);
}
.head-cta svg { width: 1em; height: 1em; transition: transform 180ms var(--ease-out); }
.head-cta:hover { --cta-bg: var(--forest-lift); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.head-cta:hover svg { transform: translateX(2px); }
.head-cta:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (max-width: 480px) { .head-cta { padding-inline: 1em; } }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 0;
  background: transparent; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.icon-btn svg { width: 17px; height: 17px; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; cursor: pointer;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease-out), border-color 0.2s var(--ease);
}
.menu-btn:hover { transform: translateY(-2px); }
.menu-btn__bars { display: grid; gap: 4px; width: 16px; }
.menu-btn__bars i { display: block; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease-out); }
.menu-btn__bars i:last-child { width: 10px; margin-left: auto; }
.menu-btn:hover .menu-btn__bars i:last-child { width: 16px; }
@media (min-width: 900px) {
  .site-nav { display: block; }
  .menu-btn { display: none; }
}

/* pełnoekranowe menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: var(--forest-ink); color: var(--on-dark);
  display: grid; grid-template-rows: auto 1fr auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out), visibility 0s linear 0.7s;
}
.nav-overlay[data-open="true"] { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease-out), visibility 0s; }
.nav-overlay__top { display: flex; align-items: center; justify-content: space-between; padding-block: clamp(0.75rem, 2vw, 1.15rem); }
.nav-overlay .icon-btn { color: var(--on-dark); border-color: color-mix(in oklch, var(--on-dark) 30%, transparent); }
.nav-overlay__body { display: flex; align-items: center; overflow-y: auto; }
.nav-list { list-style: none; padding: 0; display: grid; gap: clamp(0.1rem, 1vw, 0.4rem); width: 100%; }
.nav-list li { overflow: hidden; }
.nav-list a {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--font-display); font-size: clamp(2rem, 7vw, 4.6rem);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.12;
  color: color-mix(in oklch, var(--on-dark) 88%, transparent);
  transition: color 0.3s var(--ease), transform 0.5s var(--ease-out);
}
.nav-list a:hover, .nav-list a:focus-visible { color: var(--brass); transform: translateX(clamp(4px, 0.8vw, 10px)); }
.nav-list em {
  font-family: var(--font-sans); font-style: normal; font-size: 0.7rem;
  letter-spacing: 0.18em; color: var(--brass); font-variant-numeric: tabular-nums;
}
.nav-list a[aria-current="page"] { color: var(--brass); }
.nav-overlay__foot {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
  justify-content: space-between; align-items: end;
  padding-block: var(--s4); border-top: 1px solid color-mix(in oklch, var(--on-dark) 16%, transparent);
  font-size: var(--step--1); color: var(--on-dark-muted);
}
.nav-overlay__foot a:hover { color: var(--brass); }
.nav-overlay__foot strong { display: block; font-size: var(--step-1); color: var(--on-dark); font-weight: 500; }

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

/* =========================================================================
   hero — jedno zdjęcie, hasło i dwa kierunki. Zdjęcie ma grać pierwsze
   skrzypce: przyciemnienie tylko tam, gdzie leży tekst (dół i lewa
   krawędź) oraz cienki pas pod nagłówkiem. Niebo zostaje czyste.
   ========================================================================= */
.hero {
  position: relative; min-height: min(100svh, 1000px); display: grid;
  isolation: isolate; overflow: clip; background: var(--forest-ink);
}
/* Zapas -8% pod paralaksę w app.js (zakres -3%…7%, skala 1.02→1.05). */
.hero__media { position: absolute; inset: -8% 0 -8% 0; z-index: -2; will-change: transform; }
.hero__media picture { display: contents; }
/* Kadr poziomy: bryła domu w lewych 2/3, prześwietlone niebo po prawej —
   lekko w lewo, żeby blask słońca nie wypadał pod przyciskiem „Kontakt". */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; }
@media (max-width: 767px) {
  .hero { min-height: min(92svh, 780px); }
  .hero__media { inset: 0; }
  /* Pionowy kadr (dom-pion-*.webp) jest już przycięty na front domu. */
  .hero__media img { object-position: 50% 20%; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* pas pod paskiem kontaktu i menu */
    linear-gradient(to bottom, color-mix(in oklch, var(--forest-ink) 58%, transparent) 0%, color-mix(in oklch, var(--forest-ink) 18%, transparent) 14%, transparent 26%),
    /* pole pod tekstem */
    linear-gradient(to top, color-mix(in oklch, var(--forest-ink) 84%, transparent) 0%, color-mix(in oklch, var(--forest-ink) 52%, transparent) 30%, color-mix(in oklch, var(--forest-ink) 10%, transparent) 58%, transparent 72%);
}
@media (min-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom, color-mix(in oklch, var(--forest-ink) 58%, transparent) 0%, color-mix(in oklch, var(--forest-ink) 22%, transparent) 11%, transparent 22%),
      /* logo w złocie na jasnym niebie potrzebuje własnego cienia */
      radial-gradient(28% 26% at 6% 9%, color-mix(in oklch, var(--forest-ink) 34%, transparent) 0%, transparent 100%),
      radial-gradient(85% 75% at 0% 92%, color-mix(in oklch, var(--forest-ink) 74%, transparent) 0%, color-mix(in oklch, var(--forest-ink) 42%, transparent) 42%, transparent 72%),
      linear-gradient(to top, color-mix(in oklch, var(--forest-ink) 46%, transparent) 0%, transparent 34%);
  }
}
.hero__in {
  align-self: end; width: min(100% - var(--gutter) * 2, 1320px); margin-inline: auto;
  padding-block: clamp(6rem, 12vh, 8rem) clamp(2.5rem, 7vh, 4rem);
  color: var(--on-dark);
}
/* Zapas na panel wyszukiwarki, który od 960 px nachodzi na zdjęcie. */
@media (min-width: 960px) { .hero__in { padding-bottom: calc(5.5rem + clamp(2.5rem, 6vh, 4rem)); } }

.hero__kicker {
  display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap;
  margin: 0 0 clamp(var(--s3), 2.5vh, var(--s4));
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklch, var(--on-dark) 86%, transparent);
}
.hero__kicker::before {
  content: ""; width: clamp(1.75rem, 3vw, 2.75rem); height: 1px; background: var(--brass); flex: none;
}
.hero__kicker span { color: var(--brass-lift); font-weight: 700; }
@media (max-width: 479px) { .hero__kicker span { display: none; } }

.hero__name {
  font-size: clamp(2.3rem, 1.15rem + 4.3vw, 5.1rem);
  font-weight: 400; letter-spacing: -0.032em; line-height: 1.04;
  margin-left: clamp(-0.35rem, -0.6vw, -0.1rem);
  hyphens: none; overflow-wrap: normal; word-break: keep-all;
  text-shadow: 0 1px 30px color-mix(in oklch, var(--forest-ink) 45%, transparent);
}
/* Druga linia ciszej: kursywa w odcieniu ciepłej bieli — hierarchia bez
   zmiany wielkości, hasło czyta się jak jedna myśl w dwóch tonach. */
.hero__nameLine--2 { font-style: italic; font-weight: 300; color: color-mix(in oklch, var(--on-dark) 88%, var(--brass-lift)); }
/* Maska: linia jest przycięta z góry, tekst w środku wjeżdża z dołu przez
   `[data-hero-line]` (motion.css) — stąd padding-block, bo przy ciasnej
   interlinii maska ucinałaby ogonki „ą ę g” i główki „Ś Ż Ó”. */
.hero__nameLine { display: block; overflow: hidden; padding-block: 0.12em; margin-block: -0.12em; }
.hero__nameLine span { display: inline-block; }

/* Akcje pod hasłem. */
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.hero__cta .btn { min-height: 3.1rem; padding-inline: 1.5em; font-size: var(--step-0); }
/* Telefon: jeden przycisk na całą szerokość — pełna etykieta mieści się
   od 320 px i nie trzeba jej skracać. */
@media (max-width: 479px) {
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; padding-inline: 1em; }
}
/* 320 px: brakowało ~10 px, żeby etykieta nie łamała się na dwie linie. */
@media (max-width: 359px) {
  .hero__cta .btn { padding-inline: 0.6em; letter-spacing: 0; }
}

/* =========================================================================
   karta oferty
   ========================================================================= */
.offer-card { position: relative; display: grid; gap: var(--s3); }
.offer-card__frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-2); aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-1);
  transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.offer-card--tall .offer-card__frame { aspect-ratio: 4 / 5; }
.offer-card--wide .offer-card__frame { aspect-ratio: 16 / 10; }
.offer-card__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out), opacity 450ms var(--ease);
}
.offer-card__frame img.is-alt { opacity: 0; }
/* Delikatne tło od dołu — tylko głębia, zdjęcie zostaje jasne. Ciemny
   gradient 50% gasił drugie zdjęcie, które wjeżdża przy najechaniu. */
.offer-card__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklch, var(--forest-ink) 22%, transparent), transparent 40%);
  opacity: 0; transition: opacity 280ms var(--ease);
}
/* Hover tylko na urządzeniach z myszą — na dotyku stan „przyklejał się"
   po stuknięciu i po powrocie wstecz karta zostawała podniesiona. */
@media (hover: hover) {
  .offer-card:hover .offer-card__frame { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .offer-card:hover .offer-card__frame img { transform: scale(1.035); }
  .offer-card:hover .offer-card__frame img.is-alt { opacity: 1; }
  .offer-card:hover .offer-card__frame::after { opacity: 1; }
}
.offer-card:focus-within .offer-card__frame { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.offer-card:focus-within .offer-card__frame img.is-alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .offer-card .offer-card__frame, .offer-card .offer-card__frame img { transform: none !important; }
}

.badge {
  position: absolute; z-index: 2; top: var(--s3); left: var(--s3);
  display: inline-flex; align-items: center; gap: 0.4em;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--forest-ink);
  padding: 0.32em 0.75em; border-radius: 0;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: var(--shadow-1);
}
.badge svg { width: 0.85em; height: 0.85em; }
.badge--accent { background: var(--brass); }

.offer-card__body { display: grid; gap: 0.55rem; }
.offer-card__meta {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.offer-card__meta i { display: block; width: 3px; height: 3px; border-radius: 0; background: var(--brass); }
.offer-card h3 { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; line-height: 1.22; }
.offer-card h3 a { transition: color 240ms var(--ease); }
.offer-card a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-lg); }
/* Fokus z klawiatury: obrys całej karty (link rozciąga się na nią przez ::after),
   nie samego tytułu — w kolorze mosiądzu, nie domyślny niebieski. */
.offer-card a:focus-visible { outline: none; }
.offer-card a:focus-visible::after { outline: 2px solid var(--brass-deep); outline-offset: 6px; }
.offer-card__line {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--line-soft); padding-top: 0.6rem; margin-top: 0.2rem;
}
/* Kreska nad ceną zapala się mosiądzem od lewej — jedyny ruch w treści karty. */
.offer-card__line::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
@media (hover: hover) {
  .offer-card:hover h3 a { color: var(--brass-deep); }
  .offer-card:hover .offer-card__line::before { transform: scaleX(1); }
}
.offer-card:focus-within .offer-card__line::before { transform: scaleX(1); }
.offer-card__cena {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.offer-card__facts { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: var(--step--1); color: var(--muted); }
.offer-card__facts span { display: inline-flex; align-items: center; gap: 0.35em; }
.offer-card__facts svg { width: 0.95em; height: 0.95em; color: var(--brass-deep); flex: none; }

/* siatka ofert — asymetryczna, redakcyjna */
.offer-grid { display: grid; gap: clamp(var(--s4), 4vw, var(--s5)) clamp(var(--s3), 2.5vw, var(--s4)); }
@media (min-width: 760px) {
  .offer-grid { grid-template-columns: repeat(6, 1fr); }
  .offer-grid > * { grid-column: span 3; }
  .offer-grid--editorial > *:nth-child(6n+1) { grid-column: span 4; }
  .offer-grid--editorial > *:nth-child(6n+2) { grid-column: span 2; align-self: end; }
  .offer-grid--editorial > *:nth-child(6n+3) { grid-column: span 2; }
  .offer-grid--editorial > *:nth-child(6n+4) { grid-column: span 4; }
  .offer-grid--editorial > *:nth-child(6n+5) { grid-column: span 3; }
  .offer-grid--editorial > *:nth-child(6n+6) { grid-column: span 3; }
  .offer-grid--flat > * { grid-column: span 2; }
}
@media (min-width: 760px) and (max-width: 1080px) {
  .offer-grid--flat > * { grid-column: span 3; }
}

/* Strona główna: jedna sekcja z ofertami, dwie kolumny, duże zdjęcia. */
.offer-grid--duze { grid-template-columns: 1fr; }
.offer-grid--duze > * { grid-column: auto; }
@media (min-width: 880px) {
  .offer-grid--duze { grid-template-columns: 1fr 1fr; }
  .offer-grid--duze > * { grid-column: auto; }
}
@media (min-width: 1180px) {
  .offer-grid--duze { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------- opinie
   Pionowe, samodzielne kafelki obok siebie — trzy w rzędzie na desktopie,
   jeden pod drugim na telefonie. Duży cudzysłów u góry niesie ciężar wizualny
   zamiast wyrównanej kolumny ze źródłem, więc każdy kafelek stoi sam. */
.opinie {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 760px) { .opinie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .opinie { grid-template-columns: repeat(3, 1fr); } }
.opinia {
  margin: 0; position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--surface);
  transition: transform var(--dur-component, 280ms) var(--ease-out), box-shadow var(--dur-component, 280ms) var(--ease-out);
}
.opinia:hover { transform: translateY(var(--lift, -2px)); box-shadow: var(--shadow-2); z-index: 1; }
.opinia__mark {
  font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 0.6; color: var(--brass); opacity: 0.85;
}
.opinia blockquote {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.55; letter-spacing: -0.01em;
  color: var(--text); text-wrap: pretty;
}
.opinia figcaption {
  padding-top: var(--s3); border-top: 1px solid var(--line-soft);
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* =========================================================================
   nieruchomości — szukajka, filtry, siatka dużych kart
   ========================================================================= */
.listings { padding-block: clamp(4.5rem, 9vw, var(--s6)); }
@media (min-width: 1024px) { .listings { padding-block: clamp(6rem, 7.5vw, 7rem); } }
.listings__head { display: grid; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); margin-bottom: clamp(var(--s4), 4vw, var(--s5)); }
.listings__head h2 { font-size: var(--step-4); max-width: 22ch; }

.listings__bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: clamp(var(--s4), 4vw, var(--s5)); }
.listings__search {
  flex: 1 1 260px; min-width: 0; padding: var(--control-pad-y) 1.1em;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-size: var(--step--1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.listings__search:focus { outline: none; border-color: var(--brass-deep); box-shadow: var(--ring); }
.listings__filtersBtn {
  display: none; align-items: center; gap: 0.5em;
  padding: var(--control-pad-y) 1.2em; border: 1px solid var(--line-strong); background: transparent;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.listings__filtersBtn:hover { border-color: var(--forest); transform: translateY(-2px); }
.listings__aiBtn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: var(--control-pad-y) 1.3em; border: 1px solid var(--brass-deep);
  background: color-mix(in oklch, var(--brass) 10%, var(--surface));
  color: var(--forest); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease);
}
.listings__aiBtn svg { width: 1.05em; height: 1.05em; color: var(--brass-deep); flex: none; }
.listings__aiBtn:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-1);
  background: color-mix(in oklch, var(--brass) 18%, var(--surface));
}
.listings__panel { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.listings__panel select {
  appearance: none; -webkit-appearance: none;
  padding: var(--control-pad-y) 2.6em var(--control-pad-y) 1em;
  border: 1px solid var(--line-strong); background-color: var(--surface); color: var(--text);
  font-size: var(--step--1); font-weight: 600; cursor: pointer;
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23726c5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.listings__panel select:hover { border-color: var(--forest); }
.listings__panel select:focus { outline: none; border-color: var(--brass-deep); box-shadow: var(--ring); }
.listings__panelHead { display: none; }
.listings__scrim { display: none; }

@media (max-width: 760px) {
  .listings__filtersBtn { display: inline-flex; }
  .listings__panel {
    position: fixed; inset: auto 0 0 0; z-index: 130;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
    display: grid; gap: var(--s3);
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out);
    box-shadow: var(--shadow-3);
  }
  .listings__panel[data-open="true"] { transform: translateY(0); }
  .listings__panel select { width: 100%; }
  .listings__panelHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.2rem; }
  .listings__panelHead strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; }
  .listings__scrim {
    display: block; position: fixed; inset: 0; z-index: 129;
    background: color-mix(in oklch, var(--forest-ink) 45%, transparent);
    opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
  }
  .listings__scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}

.listing-card { position: relative; }
.listing-card__link {
  display: block; box-shadow: var(--shadow-1);
  transition: transform var(--dur-component, 280ms) var(--ease-out), box-shadow var(--dur-component, 280ms) var(--ease-out);
}
.listing-card:hover .listing-card__link, .listing-card__link:focus-visible { transform: translateY(var(--lift, -2px)); box-shadow: var(--shadow-2); }
.listing-card__frame {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--surface-2);
}
.listing-card__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out), opacity 0.6s var(--ease);
}
.listing-card:hover .listing-card__frame img { transform: scale(var(--zoom, 1.03)); }
.listing-card__frame img.is-alt { opacity: 0; }
.listing-card:hover .listing-card__frame img.is-alt { opacity: 1; }
.listing-card__body { display: grid; gap: 0.5rem; padding-top: var(--s3); }
/* Zawsze 2 wiersze — inaczej tytuł 1 słowa krótszy niż sąsiedni zostawiał
   cenę i fakty pod nim wyżej niż w pozostałych kartach rzędu (patrz też
   `min-height`: `line-clamp` samo nie rezerwuje miejsca dla krótszych tytułów). */
.listing-card__title {
  font-size: var(--step-1); font-weight: 500; line-height: 1.2;
  color: var(--text); max-width: 26ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: calc(1.2em * 2);
}
.listing-card__facts { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: var(--step--1); color: var(--muted); }
.listing-card__facts span { display: inline-flex; align-items: center; gap: 0.35em; }
.listing-card__facts svg { width: 0.95em; height: 0.95em; color: var(--brass-deep); flex: none; }
.listing-card__meta {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.listing-card__meta i { display: block; width: 3px; height: 3px; background: var(--brass); }
.listing-card__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
/* Zdjecie musi wypelniac kadr — `contain` zostawialo pasy tla przy zdjeciach
   o innych proporcjach niz 3:2. */
/* Cena niesie dane, nie akcent — ta sama czern co na /oferty/, zeby ta sama
   informacja nie miala dwoch roznych traktowan na dwoch stronach. */
.listing-card__cena {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 500;
  letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums;
}
.listing-card__area { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }

.listings__foot { display: flex; justify-content: flex-start; margin-top: clamp(var(--s4), 5vw, var(--s5)); }

/* ---------------------------------------- polecane: układ redakcyjny
   Pierwsza oferta duża, na dwa wiersze po lewej (kolumny 1–6), kolejne
   poziomo po prawej (od linii kolumny 7). Trzy jednakowe kafle obok
   siebie to najbardziej szablonowy układ, jaki istnieje. */
.feature-grid { display: grid; gap: clamp(var(--s4), 4vw, var(--s5)); }
@media (min-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol);
    row-gap: clamp(var(--s3), 2.4vw, var(--s4)); grid-auto-rows: 1fr;
  }
  .feature-grid > .listing-card--lead { grid-column: 1 / 7; grid-row: 1 / span 2; }
  .feature-grid > .listing-card--row { grid-column: 7 / -1; }
  .feature-grid > .listing-card--lead:only-child { grid-column: 1 / -1; grid-row: auto; }

  .listing-card--lead .listing-card__link { display: flex; flex-direction: column; height: 100%; }
  .listing-card--lead .listing-card__frame { aspect-ratio: auto; flex: 1 1 auto; min-height: 22rem; }
  .listing-card--lead .listing-card__title { font-size: var(--step-2); max-width: 26ch; -webkit-line-clamp: 3; min-height: 0; }

  .listing-card--row .listing-card__link {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0; height: 100%;
  }
  .listing-card--row .listing-card__frame { aspect-ratio: auto; height: 100%; min-height: 15rem; }
  .listing-card--row .listing-card__body { padding: clamp(var(--s3), 2vw, var(--s4)); align-content: center; }
  .listing-card--row .listing-card__cena { font-size: var(--step-2); }
  .listing-card--row .listing-card__title { font-size: var(--step-1); line-height: 1.22; -webkit-line-clamp: 3; min-height: 0; }
  .listing-card--row .listing-card__facts { row-gap: 0.3rem; }
}
.listing-card__body { background: var(--surface); }
.listing-card--lead .listing-card__title { -webkit-line-clamp: 3; min-height: 0; }
.listing-card--lead .listing-card__body { padding: var(--s3) var(--s4) var(--s4); }
@media (max-width: 959px) { .listing-card .listing-card__body { padding: var(--s3) var(--s3) var(--s4); } }
/* „Zobacz ofertę" dojeżdża przy najechaniu — cała karta jest linkiem,
   ten napis tylko mówi, co się stanie po kliknięciu. */
.listing-card__more {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.35rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em; color: var(--brass-deep);
}
.listing-card__more svg { width: 1em; height: 1em; transition: transform 0.35s var(--ease-out); }
.listing-card:hover .listing-card__more svg { transform: translateX(4px); }

/* filtry */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-bottom: var(--s4);
}
.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.48em 1.05em; border-radius: 0;
  border: 1px solid var(--line-strong); background: transparent;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.chip:hover { transform: translateY(-2px); border-color: var(--forest); }
.chip[aria-pressed="true"] { background: var(--forest); color: var(--on-dark); border-color: var(--forest); }
.chip b { font-variant-numeric: tabular-nums; opacity: 0.6; font-weight: 500; }
.filters__count { margin-left: auto; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.offer-card[hidden] { display: none; }
.listing-card[hidden] { display: none; }
.filters-empty { padding: var(--s5) var(--s4); text-align: center; color: var(--muted); line-height: 2; }
/* Pusty wynik filtrów: spokojna karta zamiast samotnej linijki tekstu
   w pustej sekcji. Pierwszy wiersz (komunikat) krojem nagłówków. */
.filters-empty:not([hidden]) {
  display: block; margin-top: var(--s3);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.filters-empty::first-line { font-family: var(--font-display); font-size: var(--step-2); color: var(--text); letter-spacing: -0.02em; }

/* =========================================================================
   wyszukiwarka nieruchomości
   Na stronie głównej panel wchodzi na dolną krawędź sekcji startowej —
   to jedyny element, który łamie siatkę na tej stronie.
   ========================================================================= */
.finder { position: relative; z-index: 2; padding-block: clamp(1.5rem, 4vw, 2.5rem) 0; }
.finder__panel {
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow-3), inset 0 1px 0 color-mix(in oklch, var(--paper) 80%, transparent);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
/* Mosiężna kreska na górnej krawędzi — łączy panel z akcentem hero. */
.finder__panel::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: clamp(4rem, 12vw, 9rem); height: 2px;
  background: var(--brass);
}
@media (min-width: 960px) {
  /* Panel wjeżdża na zdjęcie o 5.5rem — hero ma o tyle większy dolny
     margines treści, więc nic z paska faktów nie chowa się pod spodem. */
  .finder { padding-top: 0; }
  .finder__panel { margin-top: -5.5rem; }
}
.finder__top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-bottom: clamp(1rem, 2.4vw, 1.75rem);
}
.finder__top h2 { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; }
.finder__panel .search-panel { background: none; border: 0; box-shadow: none; padding: 0; }
.finder__head {
  display: grid; gap: var(--s3);
  border-top: 1px solid var(--line); padding-top: var(--s3); margin-bottom: clamp(var(--s4), 4vw, var(--s5));
}
.finder__head h2 { font-size: var(--step-4); max-width: 24ch; }
.finder__head em { font-style: normal; font-weight: inherit; color: inherit; }

.search-panel {
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: clamp(1.25rem, 3vw, var(--s4));
}
.search-panel__grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
/* Wyszukiwarka na stronie głównej: przycisk w jednej linii z polami, nie
   osobno pod kreską. Lista ofert (tryb filtruj) zostawia wiersz akcji, bo
   ma tam licznik wyników i „Wyczyść filtry". */
@media (min-width: 1100px) {
  .search-panel[data-tryb="szukaj"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: end; }
  .search-panel[data-tryb="szukaj"] .search-panel__actions { margin: 0; padding: 0; border: 0; }
  .search-panel[data-tryb="szukaj"] .search-panel__actions .btn { min-height: 3rem; }
}
.search-panel__field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.search-panel__field label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.search-panel select,
.search-panel input[type="number"] {
  width: 100%; min-width: 0; height: 3rem; padding: 0 1em;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--step--1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* Bez tego selecty na stronie głównej brały domyślną strzałkę przeglądarki,
   a pola liczbowe swoje spinnery — obok pól bez żadnej z tych ozdób jeden
   panel wyglądał na niedokończony. Ta sama strzałka co `.listings__panel`. */
.search-panel select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23726c5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center;
}
.search-panel input[type="number"]::-webkit-outer-spin-button,
.search-panel input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.search-panel input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.search-panel select:hover,
.search-panel input[type="number"]:hover { border-color: var(--forest); }
.search-panel select:focus,
.search-panel input[type="number"]:focus {
  outline: none; border-color: var(--brass-deep);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brass) 24%, transparent);
}
.search-panel__range { display: flex; align-items: center; gap: 0.5rem; }
.search-panel__range span { color: var(--muted-soft); flex: none; }
.search-panel__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft);
}
.search-panel__actions .btn { flex: none; }
.search-panel__count { margin-left: auto; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.search-panel__reset { font-size: var(--step--1); background: none; border: 0; cursor: pointer; padding: 0; }
/* .ulink ustawia display, więc samo [hidden] by nie zadziałało. */
.search-panel__reset[hidden], .search-panel__count[hidden] { display: none; }

/* Telefon: rodzaj i transakcja obok siebie, lokalizacja i cena na całą
   szerokość — panel był ścianą czterech pól jedno pod drugim. */
.search-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
@media (max-width: 679px) {
  .search-panel__field:nth-child(n+3) { grid-column: 1 / -1; }
  .search-panel__field label { font-size: 0.72rem; }
  .search-panel[data-tryb="szukaj"] .search-panel__actions { border: 0; padding-top: 0; }
  .search-panel[data-tryb="szukaj"] .search-panel__actions .btn { width: 100%; justify-content: center; min-height: 3rem; }
}
@media (min-width: 1080px) {
  .search-panel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------- cztery kategorie */
/* Kategorie jako pasek skrótów, nie cztery puste pudła: ikona, nazwa i
   liczba w jednej linii, strzałka dojeżdża przy najechaniu, a tło
   wypełnia się od dołu (transform, nie wysokość). Krawędzie kolumn
   wypadają na liniach siatki 12-kolumnowej (1/4/7/10). */
.cats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s3), 3vw, var(--s4));
  margin-top: clamp(var(--s3), 3vw, var(--s4));
}
@media (min-width: 960px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 0.75rem; row-gap: 0.1rem;
  text-decoration: none; color: inherit;
}
.cat__frame { grid-column: 1 / -1; position: relative; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 0.75rem; background-size: cover; }
.cat__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-out); }
.cat__frame { box-shadow: var(--shadow-1); transition: box-shadow var(--dur-component, 280ms) var(--ease-out); }
.cat:hover .cat__frame, .cat:focus-visible .cat__frame { box-shadow: var(--shadow-2); }
.cat:hover .cat__frame img, .cat:focus-visible .cat__frame img { transform: scale(var(--zoom, 1.03)); }
/* Kategoria bez ofert: ta sama bryła co zdjęcie, żeby kafelki stały w jednym rzędzie. */
.cat__frame--pusty {
  display: grid; place-items: end start; padding: var(--s3);
  background: color-mix(in oklch, var(--text) 5%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--text) 10%, transparent);
}
.cat__frame--pusty span { font-size: var(--step--1); color: var(--muted); }
.cat:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 4px; }
.cat__name { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.15; }
.cat__count { grid-column: 1; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.cat__arrow { grid-row: 2 / 4; grid-column: 2; align-self: center; color: var(--brass-deep); transition: transform 0.45s var(--ease-out); }
.cat__arrow svg { width: 1.1rem; height: 1.1rem; }
.cat:hover .cat__arrow, .cat:focus-visible .cat__arrow { transform: translateX(var(--nudge, 3px)); }
@media (prefers-reduced-motion: reduce) { .cat__frame img, .cat__arrow { transition: none; } }

/* =========================================================================
   czym się zajmuję — usługi rozdzielone według tego, kto przychodzi
   Dwie kolumny: właściciel (jasna) i kupujący (ciemna). Kontrast tła robi
   podział od razu, bez czytania nagłówków. Pośrednictwo formalne dotyczy
   obu stron, więc stoi pod spodem na całą szerokość.
   ========================================================================= */
.uslugi__split {
  display: grid; gap: var(--s3);
  grid-template-columns: 1fr;
  margin-top: 0;
}
/* align-items: start — inaczej grid rozciąga obie kolumny do wysokości
   dłuższej, a krótsza (mniej usług) kończy z martwym, jednolitym tłem pod
   ostatnim wierszem zamiast karty, która kończy się tam, gdzie kończy się
   jej treść. */
@media (min-width: 900px) {
  .uslugi__split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gcol); align-items: stretch; }
  /* Właściciel po lewej na dwa wiersze; po prawej kupujący, a pod nim
     pośrednictwo — obie kolumny kończą się na tej samej linii. */
  .uslugi__split > .uslugi__grupa--wlasciciel { grid-row: 1 / span 2; }
  .uslugi__split > .uslugi__grupa--kupujacy { align-self: start; }
  .uslugi__split > .uslugi__wspolne { grid-column: 2; margin-top: 0; }
  /* Link "następny krok" przypięty do dołu karty — przy rozciągniętej
     lewej karcie stoi na jednej linii z dołem kolumny obok. */
  /* Resztę wysokości rozkładamy równo między wiersze zamiast zostawiać
     jedną dziurę nad linkiem na dole. */
  .uslugi__grupa--wlasciciel { justify-content: space-between; }
  .uslugi__split > .uslugi__wspolne { padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem); gap: 0.6rem; }
  .uslugi__split > .uslugi__wspolne h3 { font-size: var(--step-1); }
  .uslugi__split > .uslugi__wspolne p { margin-top: 0.35rem; }
  .uslugi__grupa--wlasciciel .usluga:last-of-type { margin-bottom: 1.25rem; }
}

.uslugi__grupa {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in oklch, var(--paper) 70%, transparent);
}
.uslugi__grupa--kupujacy {
  background: linear-gradient(160deg, var(--forest-lift), var(--forest) 55%, var(--forest-deep));
  border-color: transparent; color: var(--on-dark);
  box-shadow: var(--shadow-2);
}

.uslugi__grupaHead { display: grid; gap: 0.4rem; padding-bottom: 1.25rem; }
.uslugi__grupaIkona svg { width: 1.6rem; height: 1.6rem; color: var(--brass-deep); }
.uslugi__grupa--kupujacy .uslugi__grupaIkona svg { color: var(--brass); }
.uslugi__grupaHead h3 {
  margin-top: var(--s2);
  font-size: var(--step-3); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05;
}
.uslugi__grupaHead p {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.uslugi__grupa--kupujacy .uslugi__grupaHead p { color: var(--on-dark-muted); }

.usluga {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--s3);
  border-top: 1px solid var(--line); padding-block: 1.25rem;
}
.uslugi__grupa--kupujacy .usluga { border-top-color: color-mix(in oklch, var(--on-dark) 16%, transparent); }
.usluga__nr {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2;
  color: var(--brass-deep); font-variant-numeric: tabular-nums;
}
.uslugi__grupa--kupujacy .usluga__nr { color: var(--brass); }
.usluga__body { min-width: 0; }
.usluga h4 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
/* `.usluga__body p`, nie `.usluga p` — inaczej ta reguła (klasa+element,
   0-1-1) bije `.usluga__nr` (sama klasa, 0-1-0), bo `.usluga__nr` to też
   znacznik <p>: numer wychodził szary zamiast złoty, z dorzuconym odstępem. */
.usluga__body p { margin-top: 0.5rem; color: var(--muted); max-width: 52ch; }
.uslugi__grupa--kupujacy .usluga__body p { color: var(--on-dark-muted); }
/* Wiersz usługi jako całość reaguje na najechanie — wcześniej nic tu się
   nie działo poza strzałką w linku na dole kolumny. */
.usluga { transition: border-color var(--dur-component, 280ms) var(--ease); }
.usluga > * { transition: translate var(--dur-component, 280ms) var(--ease-out); }
.usluga:hover > * { translate: 0.4rem 0; }
/* Telefon: numer nad tytułem, nie w osobnej kolumnie — kolumna numeru
   zjadała ~60 px i akapity łamały się co 3–4 słowa. */
@media (max-width: 599px) {
  .usluga { grid-template-columns: 1fr; row-gap: 0.2rem; }
  .usluga__nr { font-size: var(--step--1); letter-spacing: 0.08em; }
}
.usluga:hover { border-top-color: var(--brass-deep); }
.uslugi__grupa--kupujacy .usluga:hover { border-top-color: var(--brass); }

.uslugi__krok {
  /* Stały odstęp, nie `margin-top:auto` — z `align-items:start` na rodzicu
     kolumna nie jest już rozciągana do wysokości sąsiadki, więc "auto"
     przykleiłoby link tuż pod ostatnią usługą bez żadnego oddechu. */
  margin-top: 0.5rem; width: 100%;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em;
  color: var(--brass-deep);
}
.uslugi__grupa--kupujacy .uslugi__krok {
  color: var(--brass);
  border-top-color: color-mix(in oklch, var(--on-dark) 16%, transparent);
}
.uslugi__krok svg { width: 1em; height: 1em; transition: transform 180ms var(--ease-out); }
.uslugi__krok:hover svg { transform: translateX(3px); }
.uslugi__krok:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.uslugi__wspolne {
  margin-top: var(--s3);
  display: grid; gap: var(--s3) var(--s5); align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--brass) 7%, var(--surface));
}
/* Poza stroną główną (bez kolumny obok) pasek zostaje poziomy. */
@media (min-width: 900px) {
  .uslugi__wspolne:not(.uslugi__split > *) { grid-template-columns: 12rem minmax(0, 1fr) auto; }
}
.uslugi__wspolneLabel {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep);
  align-self: start; padding-top: 0.35rem;
}
.uslugi__wspolne h3 { font-size: var(--step-2); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; }
.uslugi__wspolne p { margin-top: 0.5rem; color: var(--muted); max-width: 64ch; }
.uslugi__wspolne .btn { justify-self: start; }

/* =========================================================================
   porady
   ========================================================================= */
.porady-grid {
  display: grid; gap: var(--s4); grid-template-columns: 1fr;
  margin-top: clamp(var(--s4), 4vw, var(--s5));
}
@media (min-width: 760px) { .porady-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .porady-grid--lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } }
/* Jedna porada w trzykolumnowej siatce zostawiała dwie trzecie pasma puste.
   Sama idzie na pełną szerokość, rozpięta na tej samej linii kolumny 7
   co lead nagłówka: tytuł po lewej, zajawka i link po prawej. */
@media (min-width: 960px) {
  .porady-grid:has(> .porada-card:only-child) { grid-template-columns: 1fr; }
  .porada-card:only-child .porada-card__frame { aspect-ratio: 21 / 9; }
  .porada-card:only-child .porada-card__body {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); align-items: start;
  }
  .porada-card:only-child .porada-card__data { grid-column: 1 / 7; grid-row: 1; }
  .porada-card:only-child .porada-card__body { grid-template-rows: auto auto 1fr; }
  .porada-card:only-child .porada-card__title { grid-column: 1 / 7; grid-row: 2 / span 2; font-size: var(--step-2); max-width: 24ch; }
  .porada-card:only-child .porada-card__lead { grid-column: 7 / -1; grid-row: 2; margin-top: 0.25rem; font-size: var(--step-0); max-width: 46ch; }
  .porada-card:only-child .porada-card__more { grid-column: 7 / -1; grid-row: 3; justify-self: start; align-self: start; margin-top: var(--s2); }
}

.porada-card { border-top: 1px solid var(--line); }
.porada-card__link {
  display: block; padding-top: var(--s3); text-decoration: none; color: inherit; height: 100%;
  transition: transform 0.2s var(--ease-out);
}
.porada-card__link:hover { transform: translateY(-2px); }
.porada-card__link:hover .porada-card__title { color: var(--brass-deep); }
.porada-card__link:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 4px; }
.porada-card__frame {
  overflow: hidden; margin-bottom: var(--s3); aspect-ratio: 3 / 2; background: var(--bone-deep);
  box-shadow: var(--shadow-1); transition: box-shadow var(--dur-component, 280ms) var(--ease-out);
}
.porada-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease-out); }
.porada-card__link:hover .porada-card__frame, .porada-card__link:focus-visible .porada-card__frame { box-shadow: var(--shadow-2); }
.porada-card__link:hover .porada-card__frame img, .porada-card__link:focus-visible .porada-card__frame img { transform: scale(var(--zoom, 1.03)); }
.porada-card__more svg { transition: transform var(--dur-component, 280ms) var(--ease-out); }
.porada-card__link:hover .porada-card__more svg, .porada-card__link:focus-visible .porada-card__more svg { transform: translateX(var(--nudge, 3px)); }
.porada-card__data {
  font-size: var(--step--1); color: var(--muted-soft);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.porada-card__title {
  margin-top: 0.5rem; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.2;
  transition: color 0.2s var(--ease);
}
.porada-card__lead { margin-top: 0.6rem; color: var(--muted); font-size: var(--step--1); }
.porada-card__more {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--s3);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; color: var(--brass-deep);
}
.porada-card__more svg { width: 1.05em; height: 1.05em; }

.porady-pusto { padding: clamp(var(--s4), 5vw, var(--s5)) 0; border-top: 1px solid var(--line); }
.porady-pusto p { font-size: var(--step-1); font-family: var(--font-display); letter-spacing: -0.02em; }
.porady-pusto__note { margin-top: var(--s3); font-family: var(--font-sans); font-size: var(--step-0); color: var(--muted); }
.porady-pusto__note .ulink { font-size: inherit; font-family: inherit; }
.porady-inne__tytul { font-size: var(--step-2); border-top: 1px solid var(--line); padding-top: var(--s3); }

.artykul__data { margin-top: var(--s3); font-size: var(--step--1); color: var(--muted-soft); }
.artykul { max-width: var(--measure); }
.artykul__foto { margin-bottom: var(--s4); }
.artykul__foto img { width: 100%; height: auto; display: block; }
.artykul h2 { font-size: var(--step-2); margin-top: var(--s4); }
.artykul p { margin-top: var(--s3); }

/* =========================================================================
   sekcja ciemna / pełnoekranowa
   ========================================================================= */
/* Pasmo na ciemnym tle przedefiniowuje tokeny, więc komponenty w środku
   dostosowują się same — bez osobnych wariantów klas. */
.dark-band {
  position: relative; overflow: clip;
  background: var(--forest-ink);
  color: var(--on-dark);
  --text: var(--on-dark);
  --muted: color-mix(in oklch, var(--on-dark) 68%, transparent);
  --muted-soft: color-mix(in oklch, var(--on-dark) 50%, transparent);
  --surface: color-mix(in oklch, var(--on-dark) 8%, transparent);
  --surface-2: color-mix(in oklch, var(--on-dark) 12%, transparent);
  --line: color-mix(in oklch, var(--on-dark) 18%, transparent);
  --line-soft: color-mix(in oklch, var(--on-dark) 11%, transparent);
  --line-strong: color-mix(in oklch, var(--on-dark) 30%, transparent);
}
.dark-band .eyebrow--num { color: var(--brass); }
/* Dwa bardzo delikatne rozbłyski zamiast płaskiej czerni — na osobnej,
   nieruchomej w DOM warstwie, bo animowanie `background-position` liczy
   layout/paint na każdej klatce scrolla. GSAP przesuwa tylko `--glow-y`,
   transform czyta to tanio z kompozytora. `.wrap` dostaje własny z-index,
   inaczej pozycjonowany `::before` malowałby się NAD treścią, nie pod nią. */
.dark-band::before {
  content: ""; position: absolute; inset: -18% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 18% 0%, color-mix(in oklch, var(--brass) 9%, transparent), transparent 62%),
    radial-gradient(70% 40% at 88% 55%, color-mix(in oklch, var(--brass) 6%, transparent), transparent 58%);
  transform: translateY(var(--glow-y, 0px));
  /* Stopka pod pasmem ma płaską czerń — dolny blask jest mniejszy i wyżej,
     żeby zgasł przed krawędzią (inaczej styk wychodzi jako twarda linia).
     Bez mask-image: maska na warstwie przesuwanej przy każdym scrollu
     kosztowała sekundy na klatkę i zatrzymywała animacje odsłon. */
}
.dark-band > .wrap { position: relative; z-index: 1; }
.soft-band { background: color-mix(in oklch, var(--forest) 4%, transparent); }

/* =========================================================================
   Dębina Park — sekcja z paralaksą
   ========================================================================= */
.debina { position: relative; overflow: clip; color: var(--on-dark); isolation: isolate; }
.debina__bg { position: absolute; inset: -14% 0; z-index: -2; }
.debina__bg img { width: 100%; height: 100%; object-fit: cover; }
.debina::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, color-mix(in oklch, var(--forest-ink) 94%, transparent) 0%, color-mix(in oklch, var(--forest-ink) 78%, transparent) 44%, color-mix(in oklch, var(--forest-ink) 32%, transparent) 100%);
}
.debina__in { padding-block: clamp(var(--s5), 12vw, var(--s7)); display: grid; gap: clamp(var(--s4), 5vw, var(--s5)); }
@media (min-width: 940px) { .debina__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; } }
.debina h2 { font-size: var(--step-5); font-weight: 400; letter-spacing: -0.045em; line-height: 0.94; }
.debina h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.debina__lead { margin-top: var(--s4); max-width: 44ch; font-size: var(--step-1); line-height: 1.62; color: color-mix(in oklch, var(--on-dark) 84%, transparent); }
.debina__specs { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: 0; }
.debina__specs li {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding-block: 0.85rem; border-bottom: 1px solid color-mix(in oklch, var(--on-dark) 16%, transparent);
  font-size: var(--step--1); letter-spacing: 0.04em;
}
.debina__specs b { font-weight: 600; color: var(--brass); font-variant-numeric: tabular-nums; }
.debina__cards { display: grid; gap: var(--s3); }
@media (min-width: 620px) { .debina__cards { grid-template-columns: 1fr 1fr; } }
.debina__card {
  position: relative; display: grid; gap: 0.6rem; padding: var(--s3);
  background: color-mix(in oklch, var(--on-dark) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--on-dark) 14%, transparent);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease);
}
.debina__card:hover { transform: translateY(var(--lift, -2px)); background: color-mix(in oklch, var(--on-dark) 13%, transparent); }
.debina__card img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.debina__card strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; }
.debina__card span { font-size: var(--step--1); color: color-mix(in oklch, var(--on-dark) 66%, transparent); letter-spacing: 0.06em; text-transform: uppercase; }
.debina__card a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }

/* =========================================================================
   karta etapu (.step) — używana na /o-nas/ i na stronie Dębina Park
   ========================================================================= */
/* Karta etapu: tresc u gory, oversized numer dociety do dolu. Wczesniej numer
   byl na gorze, a reszta karty (rowna najwyzszej w rzedzie) zostawala pusta —
   stad ~200px martwego miejsca w kazdej krotszej karcie. */
.step {
  flex: 0 0 min(82vw, 460px);
  scroll-snap-align: center;
  display: grid; grid-template-rows: 1fr auto; gap: var(--s4);
  padding: clamp(var(--s4), 3vw, var(--s5));
  min-height: clamp(340px, 46vh, 460px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  /* skalowanie aktywnej karty ustawia GSAP — tu tylko punkt odniesienia */
  transform-origin: 50% 50%;
}
/* Mosiezna kreska u gory niesie rytm sekcji i odrozania karte od tla. */
.step::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--brass) 0%, color-mix(in oklch, var(--brass) 0%, transparent) 72%);
}
.step:nth-child(even) { background: color-mix(in oklch, var(--brass) 5%, var(--surface)); }
.step__body { display: grid; gap: var(--s3); align-content: start; }
/* Wyzsza specyficznosc niz `.step p` — inaczej regula akapitu nadpisuje
   rozmiar i kolor numeru. */
.step .step__num {
  justify-self: end;
  padding-top: var(--s3); width: 100%; text-align: right;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 300;
  line-height: 0.78; letter-spacing: -0.06em;
  color: color-mix(in oklch, var(--brass-deep) 34%, transparent);
  font-variant-numeric: lining-nums;
}
.step h3 { font-size: var(--step-2); font-weight: 500; }
.step p { color: var(--muted); font-size: var(--step-0); line-height: 1.7; }


/* =========================================================================
   wycena — pasek CTA
   ========================================================================= */
/* Poszukiwanie na zlecenie — układ jak .pitch, ale na jasnym tle,
   bo sekcja stoi zaraz pod siatką ofert i nie może jej przygnieść. */
.zlecenie { display: grid; gap: clamp(var(--s4), 5vw, var(--s5)); align-items: start; }
@media (min-width: 960px) {
  .zlecenie { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); }
  .zlecenie > :first-child { grid-column: 1 / 7; }
  .zlecenie > :last-child { grid-column: 7 / -1; }
}
.zlecenie h2 { font-size: var(--step-3); font-weight: 400; letter-spacing: -0.03em; }
.zlecenie h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.zlecenie__note {
  margin-top: var(--s4); padding: 0; list-style: none;
  font-size: var(--step--1); color: var(--muted);
  display: grid; gap: 0.6rem;
}
.zlecenie__note li { display: flex; align-items: flex-start; gap: 0.55em; }
.zlecenie__note svg { width: 1.05em; height: 1.05em; color: var(--brass-deep); flex: none; margin-top: 0.25em; }

.pitch { display: grid; gap: clamp(var(--s4), 5vw, var(--s5)) var(--gcol); align-items: start; }
/* Druga kolumna zawsze zaczyna się na linii kolumny 7 — tak jak FAQ,
   nagłówki sekcji i karty ofert. */
@media (min-width: 960px) {
  .pitch { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pitch > :first-child { grid-column: 1 / 6; }
  .pitch > :last-child { grid-column: 7 / -1; }
  .pitch > .pitch__form {
    grid-column: 7 / -1;
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
  }
}
.pitch__head .shead { margin-bottom: var(--s4); }
.pitch h2 { font-size: var(--step-4); font-weight: 400; letter-spacing: -0.04em; }
.pitch .shead h2 { font-weight: 600; letter-spacing: -0.03em; }
.pitch h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.pitch__list { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: p; }
.pitch__list li {
  counter-increment: p;
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--line);
  font-size: var(--step-1); line-height: 1.5;
}
.pitch__list li:last-child { border-bottom: 1px solid var(--line); }
.pitch__list li::before {
  content: "0" counter(p);
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em;
  color: var(--brass); padding-top: 0.55em;
}

/* dane kontaktowe jako czysta lista — bez kart, bez ikon w kółkach, bez gradientów */
.contact-plain { display: grid; gap: 0.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.contact-plain__label { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.contact-plain__phone {
  font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  font-weight: 500; letter-spacing: -0.03em; color: var(--brass-deep); font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}
.contact-plain__phone:hover { color: var(--forest); }
/* Jasny mosiądz ma kontrast tylko na ciemnym tle (na jasnym 2,3:1). */
.dark-band .contact-plain__phone { color: var(--brass); }
.dark-band .contact-plain__phone:hover { color: var(--brass-lift); }
.contact-plain__note { font-size: var(--step--1); color: var(--muted); max-width: 46ch; }
/* Słuchawka przed numerem — jak na /kontakt/, tylko w kolorze numeru. */
.contact-plain__phone:has(svg) { display: inline-flex; align-items: center; gap: 0.3em; justify-self: start; }
.contact-plain__phone svg { width: 0.55em; height: 0.55em; flex: none; }

/* Przycisk mapy stoi na ciemnym paśmie kontaktu, więc wariant wyciszony
   musi tam brać jasny tekst — inaczej znika na czerni. */
.map-frame--panel .map-facade__btn {
  --btn-fg: var(--on-dark);
  border-color: color-mix(in oklch, var(--on-dark) 40%, transparent);
}
.map-frame--panel .map-facade__btn:hover { background: color-mix(in oklch, var(--on-dark) 12%, transparent); }

/* =========================================================================
   zasięg
   ========================================================================= */
.reach { display: grid; gap: clamp(var(--s4), 5vw, var(--s5)); }
@media (min-width: 940px) { .reach { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; } }
.reach__towns { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.reach__towns span {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 400; letter-spacing: -0.03em; line-height: 1.25;
  transition: color 0.25s var(--ease);
}
.reach__towns span:hover { color: var(--brass-deep); }
.reach__towns i { align-self: center; width: 5px; height: 5px; border-radius: 0; background: var(--brass); opacity: 0.7; }
.map-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3; background: var(--surface-2);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Kafelek zastępczy mapy. Ma te same proporcje co iframe, który go zastąpi,
   więc podmiana po kliknięciu nie przesuwa niczego na stronie. */
.map-facade {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: var(--s3); padding: var(--s4) var(--gutter); text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--brass) 8%, transparent), transparent 70%),
    var(--surface-2);
}
/* Kadr 4:3 dawał morze pustki wokół trzech linijek tekstu. Niższe proporcje
   obowiązują ZAWSZE — także po wstawieniu mapy — więc kliknięcie nie
   przesuwa układu ani o piksel. Mapa dojazdu nie potrzebuje wysokiego kadru,
   liczy się szerokość ulicy, nie ilość pola nad nią. */
.map-frame { aspect-ratio: 16 / 7; }
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 3; } }
.map-facade__label {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.02em;
}
.map-facade__label svg { width: 1.1em; height: 1.1em; color: var(--brass-deep); flex: none; }
.map-facade__note { font-size: var(--step--1); color: var(--muted); max-width: 44ch; }
.map-facade__note .ulink { white-space: nowrap; }
/* Telefon: dłuższy adres łamał się na dwa wiersze z interlinią akapitu,
   a pinezka wisiała z boku. Pinezka nad tekstem, zwarte wiersze. */
.map-facade__label { line-height: 1.25; }
@media (max-width: 640px) {
  .map-facade__label { flex-direction: column; gap: 0.4em; }
  .map-facade__label::before { left: 50% !important; top: 0.55em !important; }
}

/* W ciemnym pasmie kontaktu kafelek musi czytać się na czerni. */
.map-frame--panel .map-facade {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--brass) 14%, transparent), transparent 70%),
    color-mix(in oklch, var(--on-dark) 6%, transparent);
}

/* Mapa w ciemnym pasmie kontaktu. Kafle OSM sa jasne — bez przyciemnienia
   swiecilyby na czerni mocniej niz formularz, ktory jest tu glownym celem.
   Inwersja + obrot odcienia daje ciemna mape z zachowanymi kolorami dróg. */
.map-frame--panel {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 1;
  margin-top: var(--s3);
  border-color: var(--line-strong);
  box-shadow: none;
}
.map-frame--panel iframe {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.55);
}
/* Delikatna winieta zdejmuje twarda krawedz kafli i wiaze mape z tlem sekcji. */
.map-frame--panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-dark) 10%, transparent),
              inset 0 -40px 60px -40px var(--forest-ink);
}
@media (max-width: 939px) { .map-frame--panel { aspect-ratio: 4 / 3; margin-top: 0; } }

/* =========================================================================
   o mnie
   ========================================================================= */
.about { display: grid; gap: clamp(var(--s4), 5vw, var(--s5)); align-items: center; }
@media (min-width: 960px) {
  .about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); align-items: start; }
  .about > :first-child { grid-column: 1 / 7; }
  .about > :last-child { grid-column: 7 / -1; }
}
.about__aside { display: grid; gap: var(--s4); }
.about__asideLabel {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-2);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Zdjęcie „O mnie” jest kwadratowe — pokazujemy je w całości, bez kadrowania,
   i ograniczamy szerokość, żeby niewielki oryginał nie musiał się rozciągać. */
.portrait--square { aspect-ratio: 1 / 1; max-width: 380px; margin-inline: auto; }
@media (min-width: 860px) { .portrait--square { margin-inline: 0; } }
.about__body h2 { font-size: var(--step-4); font-weight: 400; letter-spacing: -0.04em; }
.about__body h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.about__quote {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 400;
  font-style: italic; line-height: 1.35; letter-spacing: -0.02em;
  margin-block: var(--s4); max-width: 30ch; text-wrap: balance;
}
.about__facts { list-style: none; padding: 0; display: grid; gap: 0; margin-top: var(--s4); }
.about__facts li {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding-block: 0.85rem; border-bottom: 1px solid var(--line-soft); font-size: var(--step--1);
}
.about__facts dt, .about__facts .k { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.about__facts b { font-weight: 600; }
.about__facts a { display: inline-flex; align-items: center; gap: 0.35em; }
.about__facts a svg { width: 0.9em; height: 0.9em; flex: none; color: var(--brass-deep); }
/* W wąskiej karcie bocznej długie wartości zawijały się pod etykietę
   tylko w niektórych wierszach. Tu każdy wiersz ma etykietę nad wartością. */
.side .about__facts li { display: grid; gap: 0.2rem; justify-content: stretch; }

/* =========================================================================
   FAQ — dwukolumnowy układ, sticky nagłówek po lewej
   ========================================================================= */
.faq-layout { display: grid; gap: 0 var(--gcol); }
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .faq-layout__head { grid-column: 1 / 6; position: sticky; top: 120px; }
  .faq-layout__list { grid-column: 7 / -1; }
  .faq-layout__head .shead { margin-bottom: 0; }
}
.faq { border-top: 1px solid var(--line-strong); }

.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.3s var(--ease);
}
.faq details[open] { background: color-mix(in oklch, var(--forest) 3.5%, transparent); }
.faq summary {
  position: relative;
  display: flex; align-items: baseline; gap: var(--s3); cursor: pointer;
  padding: clamp(0.95rem, 1.8vw, 1.25rem) calc(var(--s3) + 28px) clamp(0.95rem, 1.8vw, 1.25rem) 0;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.35; list-style: none;
  transition: color 0.25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-deep); }
/* Pytanie odsuwa się o 0,5 rem przesunięciem (translate), nie paddingiem:
   animowany padding przeliczał układ w każdej klatce i tekst łamał się
   w trakcie ruchu w innych miejscach. */
.faq__q { display: block; transition: translate 0.35s var(--ease-out); }
.faq summary:hover .faq__q, .faq summary:focus-visible .faq__q, .faq details[open] .faq__q { translate: 0.5rem 0; }
.faq summary:focus-visible { outline-offset: -2px; }
/* plus, który zwija się do minus — tylko transform, bez rotacji */
.faq__icon { position: absolute; right: var(--s3); top: 50%; translate: 0 -50%; width: 13px; height: 13px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--brass-deep); }
.faq__icon::before { width: 13px; height: 1.6px; }
.faq__icon::after { width: 1.6px; height: 13px; transition: transform var(--dur-component, 280ms) var(--ease-out); }
.faq details[open] .faq__icon::after { transform: scaleY(0); }
.faq__a { padding: 0 var(--s4) clamp(0.95rem, 1.8vw, 1.25rem) 0.5rem; max-width: 68ch; color: var(--muted); }
.faq__a p + p { margin-top: 0.8em; }
.faq__a a { color: var(--forest-lift); text-decoration: underline; text-underline-offset: 3px; }
.faq__a .todo { color: var(--brass-deep); font-style: italic; }

/* =========================================================================
   formularz
   ========================================================================= */
.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85em 1em;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--highlight);
  transition: border-color var(--dur-micro, 180ms) var(--ease), box-shadow var(--dur-component, 280ms) var(--ease-out), background-color var(--dur-micro, 180ms) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: color-mix(in oklch, var(--forest) 50%, transparent); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brass-deep); background-color: var(--paper);
  box-shadow: var(--ring);
}
/* Pole wskazane przez walidację (app.js ustawia aria-invalid). Kolor plus
   grubsza krawędź od dołu — nie sam kolor. */
.field [aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: inset 0 -2px 0 var(--danger);
}
.field [aria-invalid="true"]:focus { box-shadow: inset 0 -2px 0 var(--danger), var(--ring); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-soft); }
.field--row { display: grid; gap: var(--s3); }
@media (min-width: 620px) { .field--row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  align-items: start; font-size: 0.84rem; line-height: 1.55; color: var(--muted);
  padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: color-mix(in oklch, var(--surface) 55%, transparent);
}
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: 2px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 0; background: var(--surface);
  cursor: pointer; display: grid; place-content: center;
  transition: background-color var(--dur-micro, 180ms) var(--ease), border-color var(--dur-micro, 180ms) var(--ease), box-shadow var(--dur-component, 280ms) var(--ease-out);
}
.consent input:hover { border-color: var(--brass-deep); }
.consent input:focus-visible { outline: none; border-color: var(--brass-deep); box-shadow: var(--ring); }
.consent input[aria-invalid="true"] { border-color: var(--danger); }
/* Ptaszek „wskakuje" z leciutkim odbiciem — jedyne miejsce z overshootem,
   bo to potwierdzenie decyzji, nie dekoracja. */
.consent input::before {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  transition: transform 0.24s cubic-bezier(0.34, 1.5, 0.64, 1);
  box-shadow: inset 1em 1em var(--forest-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.consent input:checked { background: var(--brass); border-color: var(--brass); }
.consent input:checked::before { transform: scale(1); }
.consent a { color: var(--forest-lift); text-decoration: underline; text-underline-offset: 3px; }
/* Na ciemnym tle forest-lift jest niemal niewidoczny — kontrast AA wymaga jasnego linku. */
.dark-band .consent a, .site-footer .consent a { color: var(--brass-lift); }
.dark-band .consent a:hover, .site-footer .consent a:hover { color: var(--brass); }

/* Jedna karta formularza na całej stronie (prośba klientki 14.10.2026).
   Na ciemnym paśmie przywraca jasne tokeny, więc pola, zgoda i przycisk
   wyglądają identycznie na każdej podstronie. */
.form-card {
  --text: var(--ink);
  --muted: oklch(0.470 0.018 65);
  --muted-soft: oklch(0.530 0.016 68);
  --surface: var(--paper);
  --surface-2: var(--bone-deep);
  --line: color-mix(in oklch, var(--ink) 14%, transparent);
  --line-soft: color-mix(in oklch, var(--ink) 8%, transparent);
  --line-strong: color-mix(in oklch, var(--ink) 26%, transparent);
  position: relative; overflow: hidden;
  color: var(--text); background: var(--paper);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, var(--s4));
  box-shadow: var(--shadow-2), var(--highlight);
}
.form-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.dark-band .form-card .consent a { color: var(--forest-lift); }
.dark-band .form-card .consent a:hover { color: var(--brass-deep); }
.form-card .btn:focus-visible { outline-color: var(--brass-deep); }
/* Wąski ekran: karta ma już własny margines, więc zgoda bez drugiej ramki —
   tekst dostaje ok. 30 px szerokości i kilka linii mniej. */
@media (max-width: 479px) {
  .form-card .consent { padding: 0; border: 0; background: none; }
}
.form__person { display: flex; align-items: center; gap: var(--s3); }
.form__person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.form__status {
  display: none; padding: var(--s3); border-radius: var(--radius);
  border: 1px solid var(--line); font-size: var(--step--1); line-height: 1.6;
}
.form__status[data-state="ok"] { display: block; background: color-mix(in oklch, var(--forest) 10%, transparent); border-color: color-mix(in oklch, var(--forest) 32%, transparent); }
.form__status[data-state="err"] { display: block; background: color-mix(in oklch, oklch(0.55 0.15 32) 12%, transparent); border-color: color-mix(in oklch, oklch(0.55 0.15 32) 40%, transparent); }

/* =========================================================================
   stopka
   ========================================================================= */
/* Ciemna stopka z tym samym ciepłym blaskiem co tło strony (mosiądz z
   prawego górnego rogu) — nie płaska czerń doklejona pod treścią. */
.site-footer {
  background:
    radial-gradient(70% 55% at 88% 0%, color-mix(in oklch, var(--brass) 7%, transparent) 0%, transparent 70%),
    var(--forest-ink);
  color: var(--on-dark); padding-top: clamp(3rem, 6vw, 4.5rem);
}
/* Linki stopki: kolor + cienka kreska rosnąca od lewej (transform). */
.footer-cols a, .footer-top__kontakt a:not(.footer-big-phone), .footer-legal a, .footer-legal__btn { position: relative; }
.footer-cols a::after, .footer-top__kontakt a:not(.footer-big-phone)::after, .footer-legal a::after, .footer-legal__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 0.32s var(--ease-out);
}
.footer-cols a:hover::after, .footer-top__kontakt a:not(.footer-big-phone):hover::after, .footer-legal a:hover::after, .footer-legal__btn:hover::after,
.footer-cols a:focus-visible::after, .footer-legal a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.site-footer :focus-visible { outline-color: var(--brass); }
.footer-big-phone { transition: color var(--dur-micro, 180ms) var(--ease); }
.footer-top__kontakt .footer-big-phone:hover { color: var(--brass-lift); }
/* Stopka jest siostra <main>, wiec o styk decyduje ostatnia sekcja w srodku.
   Gdy i ona jest ciemna, oba odstepy skladaja sie w jedna przerwe — bez tego
   miedzy formularzem a logo jest ~240px pustej czerni. */
main:has(> .dark-band:last-child) + .site-footer { padding-top: clamp(var(--s3), 2.5vw, var(--s4)); }
.footer-top {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s4);
}
@media (min-width: 960px) {
  .footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); }
  .footer-top > :first-child { grid-column: 1 / 7; justify-self: start; }
  .footer-top > :last-child { grid-column: 10 / -1; }
}
.footer-logo { width: clamp(150px, 16vw, 210px); height: auto; filter: brightness(1.2); }
.footer-top__kontakt { display: grid; gap: 0.35rem; justify-items: start; }
.footer-top__kontakt span {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in oklch, var(--on-dark) 55%, transparent); font-weight: 600;
}
.footer-top__kontakt a { color: color-mix(in oklch, var(--on-dark) 84%, transparent); font-size: var(--step--1); transition: color 0.2s var(--ease); }
.footer-top__kontakt a:hover { color: var(--brass); }
.footer-top__kontakt .footer-big-phone { font-size: var(--step-3); color: var(--brass); }
.footer-cols {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top: var(--s4); border-top: 1px solid color-mix(in oklch, var(--on-dark) 18%, transparent);
}
/* Ta sama siatka co strona: Biuro 1–3, „Na skróty" 4–12 w trzech
   własnych kolumnach (strony, typy nieruchomości, profile). */
@media (min-width: 960px) {
  .footer-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); }
  .footer-cols > :nth-child(1) { grid-column: 1 / 4; }
  .footer-cols > :nth-child(2) { grid-column: 4 / -1; }
}
.footer-skroty__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.footer-skroty__grid ul { align-content: start; }
.footer-skroty__t { font-size: var(--step--1); font-weight: 600; margin: 0 0 0.5rem; }
.footer-cols h3 { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklch, var(--on-dark) 55%, transparent); font-weight: 600; margin-bottom: 0.9rem; }
.footer-cols ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; font-size: var(--step--1); }
.footer-cols a { color: color-mix(in oklch, var(--on-dark) 84%, transparent); transition: color 0.2s var(--ease); }
.footer-cols a:hover { color: var(--brass); }
.footer-cols address { font-style: normal; font-size: var(--step--1); color: color-mix(in oklch, var(--on-dark) 84%, transparent); line-height: 1.8; }
.footer-big-phone {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--brass);
}
.footer-legal {
  margin-top: var(--s5); padding-block: var(--s3);
  border-top: 1px solid color-mix(in oklch, var(--on-dark) 12%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.5rem var(--s3); justify-content: space-between;
  font-size: 0.76rem; color: color-mix(in oklch, var(--on-dark) 52%, transparent);
}
/* Przycisk czatu jest fixed w prawym dolnym rogu — bez zapasu zaslania prawa
   strone paska prawnego (polityka prywatnosci, licznik ofert). */
@media (min-width: 681px) { .footer-legal { padding-bottom: 5.5rem; } }
.footer-legal a, .footer-legal__btn { transition: color 0.2s var(--ease); }
.footer-legal a:hover { color: var(--brass); }
.todo-flag {
  display: inline-block; border: 1px dashed color-mix(in oklch, var(--brass) 55%, transparent);
  color: var(--brass); border-radius: 0; padding: 0 0.4em; font-size: 0.72rem; letter-spacing: 0.06em;
}

/* =========================================================================
   podstrona oferty
   ========================================================================= */
.crumbs { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.crumbs a:hover { color: var(--forest-lift); }
.crumbs svg { width: 0.7em; height: 0.7em; opacity: 0.5; }

/* pierwszy ekran podstrony oferty — dwie kolumny na białym tle: opis i cena
   po jednej stronie, zdjęcia po drugiej. Zero czarnych sekcji — nagłówek
   strony zostaje czytelny od razu, bez scrolla. */
.offer-top {
  padding-top: clamp(6.5rem, 14vh, 9.5rem);
  /* minmax(0, 1fr), nie samo 1fr: domyślna kolumna gridu nie schodzi poniżej
     min-content dziecka, więc jeden długi wyraz w tytule (np. „masarnia/
     produkcja") rozpychał całą kolumnę i strona jechała w bok na telefonie. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--s5), 5vw, var(--s6));
}
@media (min-width: 960px) {
  .offer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr); align-items: start;
    grid-template-rows: auto 1fr; column-gap: clamp(var(--s5), 5vw, var(--s6)); row-gap: 0; }
}
/* Kolejnosc na telefonie: najpierw co to za nieruchomosc i za ile (head),
   potem zdjecia, na koncu opis. Telefon do agentki nie moze byc przed cena. */
.offer-top__head { order: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; min-width: 0; }
.offer-top__visual { order: 2; }
.offer-top__info { order: 3; }
/* Pelny adres bywa dlugi (2-3 wiersze) — wersaliki obnizaja tu czytelnosc
   i przeciazaja blok nad naglowkiem, wiec zostaje zwykla wielkosc liter. */
.offer-top__loc {
  display: flex; align-items: baseline; gap: 0.5em;
  color: var(--muted); font-size: var(--step--1); letter-spacing: 0.01em;
}
.offer-top__loc svg { position: relative; top: 0.15em; }
.offer-top__loc svg { width: 1em; height: 1em; color: var(--brass-deep); }
.offer-top__head h1 { margin-top: 0.2rem; font-size: var(--step-4); font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; max-width: 20ch;
  /* Ostatnia deska ratunku dla wyrazu dłuższego niż szerokość ekranu —
     zwykłe tytuły łamią się po spacjach jak dotąd. */
  overflow-wrap: break-word; }
.offer-top__cena {
  margin-top: 0.3rem; font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 500; letter-spacing: -0.02em; color: var(--brass-deep); font-variant-numeric: tabular-nums;
}
/* Cena za m² zwykłą wielkością liter — wersaliki robiły z „zł/m²" „ZŁ/M²". */
.offer-top__cena span { margin-left: 0.75em; font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }

.offer-top__visual { display: grid; gap: var(--s3); align-content: start; }
.offer-top__contact { display: grid; gap: var(--s3); }
/* Telefon: karty kontaktu po opisie, nie między galerią a opisem. Na dole
   ekranu i tak jest przyklejony pasek „Zadzwoń / Umów prezentację", więc
   karty w środku tylko przerywały czytanie. `display: contents` pozwala
   ustawić galerię i kontakt osobno w kolejności siatki. */
@media (max-width: 959px) {
  .offer-top__visual { display: contents; }
  .offer-gallery { order: 2; }
  .offer-top__contact { order: 4; }
  .offer-top { row-gap: var(--s4); }
}
@media (min-width: 960px) {
  /* Desktop: tytul i cena nad opisem w lewej kolumnie, zdjecia obok przez
     caly wiersz — czyli opis po jednej stronie, fotografia po drugiej. */
  .offer-top__head { grid-column: 1; grid-row: 1; margin-bottom: var(--s4); }
  .offer-top__info { grid-column: 1; grid-row: 2; }
  /* stretch (nie start) — kolumna musi siegac wysokosci wiersza, inaczej
     przyklejony blok kontaktowy nie ma po czym jechac i znika po chwili */
  .offer-top__visual { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
  /* Przyklejony jest sam blok kontaktowy (niski), nie cala kolumna ze zdjeciami.
     Wysoka kolumna nie mogla sie zmiescic w oknie i zjezdzala przyciskiem CTA
     dokladnie pod pigulke czatu w prawym dolnym rogu. */
  /* --head-h ustawia app.js (wysokość paska z linią telefonu); zapas = 140 px */
  .offer-top__contact { position: sticky; top: calc(var(--head-h, 8.75rem) + var(--s3)); display: grid; gap: var(--s3); }
}

/* galeria: zdjęcie główne w całości widoczne (bez kadrowania), miniatury tuż pod nim */
.offer-gallery { display: grid; gap: 0.6rem; }
.offer-gallery__frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3; background: var(--surface-2); cursor: zoom-in;
  box-shadow: var(--shadow-2); background-size: cover; background-position: center;
}
.offer-gallery__frame img { width: 100%; height: 100%; object-fit: contain; }
/* Lupa na zdjęciu: jasny kafelek z cieniem — przezroczysty przycisk
   z cienką ramką ginął na jasnym niebie i trawie. */
.offer-gallery__zoom {
  position: absolute; right: var(--s3); bottom: var(--s3);
  background: color-mix(in oklch, var(--paper) 90%, transparent); color: var(--ink);
  border-color: transparent; box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background-color 240ms var(--ease);
}
@media (hover: hover) {
  .offer-gallery__frame:hover .offer-gallery__zoom { transform: translateY(-2px); box-shadow: var(--shadow-2); background: var(--paper); }
}
.offer-gallery__frame:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; }
/* Licznik zdjęć — ile jest w galerii, zanim ktoś zacznie przewijać miniatury. */
.offer-gallery__count {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 1;
  padding: 0.3em 0.7em; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: color-mix(in oklch, var(--paper) 90%, transparent); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: none;
}
.offer-gallery__count b { font-weight: 600; }
.offer-gallery__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, 1fr);
  gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.3rem; scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--ink) 22%, transparent) transparent;
}
/* Aktywna miniatura: wewnętrzny obrys (nie border — ten zmniejszał zdjęcie
   o 4 px i kadr „skakał" przy przełączaniu) i pełne krycie. */
.offer-gallery__thumb {
  position: relative;
  scroll-snap-align: start; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: var(--surface-2); opacity: 0.58;
  transition: opacity 240ms var(--ease);
}
.offer-gallery__thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--brass-deep), inset 0 0 0 3px color-mix(in oklch, var(--paper) 70%, transparent);
  opacity: 0; transition: opacity 240ms var(--ease);
}
.offer-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 450ms var(--ease-out); }
@media (hover: hover) {
  .offer-gallery__thumb:hover { opacity: 0.92; }
  .offer-gallery__thumb:hover img { transform: scale(1.04); }
}
.offer-gallery__thumb.is-active { opacity: 1; }
.offer-gallery__thumb.is-active::after, .offer-gallery__thumb:focus-visible::after { opacity: 1; }
.offer-gallery__thumb:focus-visible { outline: none; opacity: 1; }

/* galeria: poziomy scroll-snap na desktopie, natywny swipe na mobile */
.gallery { display: grid; gap: var(--s2); }
.gallery__hero { grid-column: 1 / -1; }
.gallery__hero figure { aspect-ratio: 16 / 9; }
.gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figure:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; }
.gallery__rest {
  display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.4rem; scrollbar-width: thin;
}
.gallery__rest figure { flex: 0 0 clamp(220px, 30vw, 360px); aspect-ratio: 4 / 3; scroll-snap-align: start; }

.offer-layout { display: grid; gap: clamp(var(--s4), 5vw, var(--s5)); }
@media (min-width: 1000px) { .offer-layout { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; } }

.prose { max-width: var(--measure); }
.prose p { margin-block: 1.05em; }
.prose h3 {
  font-size: var(--step-2); font-weight: 500; margin-top: 1.9em; margin-bottom: 0.5em;
  letter-spacing: -0.025em;
}
.prose ul { list-style: none; padding: 0; margin-block: 1.1em; display: grid; gap: 0.55rem; }
.prose li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.prose li::before {
  content: ""; width: 6px; height: 6px; border-radius: 0; background: var(--brass);
  margin-top: 0.72em;
}

/* Tabela parametrów: etykieta drobna i spokojna, wartość czytelna — wcześniej
   obie miały ten sam mały stopień, a wartość ciężkie 600, więc tabela
   wyglądała jak ściana pogrubionego tekstu. */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { text-align: left; padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; }
.spec-table th { font-size: 0.74rem; font-weight: 500; color: var(--muted); letter-spacing: 0.09em; text-transform: uppercase; width: 42%; padding-right: var(--s3); }
.spec-table td { font-size: var(--step-0); font-weight: 500; color: var(--text); line-height: 1.5; }

.side { position: sticky; top: calc(var(--head-h, 8.75rem) + var(--s3)); display: grid; gap: var(--s3); }
.side__card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: var(--s4); display: grid; gap: var(--s3);
  box-shadow: var(--shadow-2), var(--highlight);
  position: relative; overflow: hidden;
}
.side__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.side__who { display: grid; gap: 0.15rem; }
.side__who strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; }
.side__who span { font-size: var(--step--1); color: var(--muted); }
.side__phone {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.side__phone svg { width: 0.75em; height: 0.75em; color: var(--brass-deep); transition: transform 240ms var(--ease-out); }
.side__phone { justify-self: start; transition: color 240ms var(--ease); }
@media (hover: hover) {
  .side__phone:hover { color: var(--brass-deep); }
  .side__phone:hover svg { transform: rotate(-12deg); }
}
.side__phone:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 4px; }
.side__actions { display: grid; gap: 0.6rem; }
/* Druga karta przy ofercie („Sprzedajesz coś podobnego?") jest poboczna —
   cichsza od karty kontaktu: bez mosiężnej belki, płytszy cień, tło
   o ton ciemniejsze. Wcześniej obie ważyły tyle samo. */
.offer-top__contact .side__card + .side__card {
  background: color-mix(in oklch, var(--surface-2) 55%, var(--surface));
  box-shadow: var(--shadow-1); gap: var(--s3); padding-block: clamp(1.25rem, 2vw, var(--s4));
}
.offer-top__contact .side__card + .side__card::before { display: none; }
.side__meta { font-size: 0.76rem; color: var(--muted-soft); line-height: 1.6; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: 0.6rem; padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.sticky-cta .btn { flex: 1; justify-content: center; }
@media (max-width: 999px) { .sticky-cta { display: flex; } body.has-sticky-cta { padding-bottom: 4.5rem; } }

/* lightbox */
/* Otwarcie i zamknięcie przez opacity + visibility (nie display), żeby
   dało się je przeprowadzić płynnie. visibility gaśnie z opóźnieniem
   równym fade'owi, więc zamknięta galeria nie łapie kliknięć ani fokusu. */
.lightbox {
  position: fixed; inset: 0; z-index: 150; display: grid;
  /* ciepła czerń z tokenu — dawny odcień 158 (zieleń) został ze starej palety */
  background: color-mix(in oklch, var(--forest-ink) 95%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  place-items: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 280ms var(--ease-out), visibility 0s; }
.lightbox__img {
  max-width: min(100%, 1400px); max-height: 82vh; object-fit: contain; border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  transition: opacity 200ms var(--ease), transform 420ms var(--ease-out);
}
/* Zdjęcie przy otwarciu „dojeżdża" z lekkiego oddalenia. */
.lightbox:not([data-open="true"]) .lightbox__img { transform: scale(0.96); }
/* Zmiana zdjęcia: stare gaśnie z małym przesunięciem w stronę wyjścia,
   nowe wchodzi z przeciwnej (kierunek w --lb-dx ustawia app.js). */
.lightbox__img.is-swapping { opacity: 0; transform: translateX(var(--lb-dx, 0)); }
.lightbox__img.is-enter { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox__img, .lightbox__img.is-swapping, .lightbox:not([data-open="true"]) .lightbox__img { transform: none; }
}
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: clamp(0.75rem, 3vw, 1.5rem);
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  color: var(--on-dark); font-size: var(--step--1); letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 0; display: grid; place-items: center;
  background: color-mix(in oklch, var(--on-dark) 12%, transparent); color: var(--on-dark);
  border: 1px solid color-mix(in oklch, var(--on-dark) 22%, transparent); cursor: pointer;
  transition: background-color 240ms var(--ease), transform 240ms var(--ease-out);
}
.lightbox__nav:hover { background: color-mix(in oklch, var(--on-dark) 24%, transparent); }
.lightbox__nav--prev:hover { transform: translate(-2px, -50%); }
.lightbox__nav--next:hover { transform: translate(2px, -50%); }
.lightbox__nav:focus-visible, .lightbox .icon-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__close { position: absolute; top: clamp(0.75rem, 3vw, 1.5rem); right: clamp(0.75rem, 3vw, 1.5rem); }
.lightbox .icon-btn {
  color: var(--on-dark);
  border-color: color-mix(in oklch, var(--on-dark) 28%, transparent);
  background: color-mix(in oklch, var(--on-dark) 10%, transparent);
}
.lightbox .icon-btn:hover { background: color-mix(in oklch, var(--on-dark) 22%, transparent); }

/* =========================================================================
   asystent (czat)
   ========================================================================= */
.chat-fab {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem); z-index: 100;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.72rem 1.15rem 0.72rem 0.85rem;
  background: var(--forest); color: var(--on-dark);
  border: 1px solid color-mix(in oklch, var(--on-dark) 16%, transparent);
  border-radius: 0; cursor: pointer; box-shadow: var(--shadow-2);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background-color 240ms var(--ease), opacity 240ms var(--ease);
}
@media (hover: hover) { .chat-fab:hover { transform: translateY(-2px); background: var(--forest-lift); box-shadow: var(--shadow-3); } }
.chat-fab:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.chat-fab svg { width: 18px; height: 18px; flex: none; color: var(--brass); }
.chat-fab[data-hidden="true"] { opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.96); }
/* Arkusz filtrow na telefonie wjezdza od dolu — przycisk czatu zaslanialby
   ostatni select, wiec na czas otwarcia znika. */
body:has(.listings__panel[data-open="true"]) .chat-fab { opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.96); }
/* Kropka pulsowala bez konca — na stronie, ktora ma czytac sie spokojnie, to
   ruch dla samego ruchu. Trzy odbicia przyciagaja wzrok i wygasaja. */
.chat-fab__dot { width: 7px; height: 7px; border-radius: 0; background: var(--brass); box-shadow: 0 0 0 0 color-mix(in oklch, var(--brass) 70%, transparent); animation: pulse 2.6s ease-out 3; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brass) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 999px) { body.has-sticky-cta .chat-fab { bottom: calc(4.6rem + env(safe-area-inset-bottom)); } }
/* Baner zgód nad paskiem „Zadzwoń / Umów prezentację”, nie na nim. */
@media (max-width: 999px) {
  body.has-sticky-cta .zgody { bottom: calc(4.5rem + 0.75rem + env(safe-area-inset-bottom)); max-height: calc(80vh - 4.5rem); }
}
/* Otwarte menu mobilne jest oknem modalnym — baner nie może go przykrywać. */
html:has(.nav-overlay[data-open="true"]) .zgody { visibility: hidden; }
@media (max-width: 680px) {
  .chat-fab { padding: 0.75rem; gap: 0; right: 0.75rem; }
  .chat-fab > span:not(.chat-fab__dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .chat-fab__dot { position: absolute; top: 5px; right: 5px; }
}
/* Desktop: sama ikona 44 px, napis wysuwa się w lewo dopiero przy najechaniu
   myszą (nie po stuknięciu — na tablecie hover „przyklejał" etykietę nad
   treścią). Przycisk stoi w marginesie strony, nie na kolumnie treści:
   wcześniej 52-px kwadrat wchodził na prawą krawędź kart i karty kontaktu. */
@media (min-width: 681px) {
  .chat-fab {
    padding: 0.75rem; gap: 0;
    right: max(0.5rem, calc((var(--gutter) - 2.75rem) / 2));
    bottom: clamp(0.75rem, 2vw, 1.25rem);
  }
  .chat-fab > span:not(.chat-fab__dot) {
    position: absolute; right: calc(100% + 0.6rem); top: 50%;
    padding: 0.55rem 0.9rem; white-space: nowrap;
    background: var(--forest); color: var(--on-dark); box-shadow: var(--shadow-2);
    opacity: 0; transform: translate(8px, -50%); pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.35s var(--ease-out);
  }
  .chat-fab:focus-visible > span:not(.chat-fab__dot) { opacity: 1; transform: translate(0, -50%); }
  .chat-fab__dot { position: absolute; top: 5px; right: 5px; }
}
@media (min-width: 681px) and (hover: hover) {
  .chat-fab:hover > span:not(.chat-fab__dot) { opacity: 1; transform: translate(0, -50%); }
}

.chat-panel {
  position: fixed; right: clamp(0.75rem, 3vw, 1.75rem); bottom: clamp(0.75rem, 3vw, 1.75rem);
  z-index: 110; width: min(calc(100vw - 1.5rem), 396px); height: min(72vh, 620px);
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0;
  box-shadow: var(--shadow-3); overflow: hidden;
  /* Panel jest fixed, ale jego treść dopisuje się z JS już po pierwszym
     malowaniu. Bez izolacji przeglądarka liczy to jako przesunięcie układu
     całej strony — zmierzone 0,13 CLS na stronie bez jednej animacji.
     contain odcina wnętrze panelu od rachunku układu dokumentu. */
  contain: layout paint style;
  transform: translateY(16px) scale(0.97); opacity: 0; pointer-events: none;
  /* visibility gaśnie z opóźnieniem: zamknięty panel znika z kolejki Tab
     i z czytnika ekranu, a animacja zamykania i tak dobiega do końca. */
  visibility: hidden;
  transition: transform 0.34s var(--ease-out), opacity 0.24s var(--ease), visibility 0s linear 0.34s;
}
.chat-panel[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.chat-panel__head {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0.9rem 0.9rem 1.1rem;
  background: var(--forest-ink); color: var(--on-dark);
}
.chat-panel__head > span:not(.chat-avatar) { min-width: 0; }
.chat-panel__head strong { font-family: var(--font-display); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; display: block; }
.chat-panel__head span { font-size: 0.72rem; color: color-mix(in oklch, var(--on-dark) 62%, transparent); letter-spacing: 0.06em; }
.chat-panel__head .icon-btn { margin-left: auto; color: var(--on-dark); border-color: color-mix(in oklch, var(--on-dark) 26%, transparent); width: 34px; height: 34px; }
.chat-avatar { width: 34px; height: 34px; border-radius: 0; display: grid; place-items: center; background: var(--brass); color: var(--forest-ink); flex: none; }
.chat-avatar svg { width: 18px; height: 18px; }

.chat-log { overflow-y: auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; align-content: start; scroll-behavior: smooth; }
.msg { max-width: 90%; min-width: 0; padding: 0.7rem 0.9rem; border-radius: 0; font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.msg--bot { background: var(--surface-2); border-bottom-left-radius: 4px; justify-self: start; }
.msg--me { background: var(--forest); color: var(--on-dark); border-bottom-right-radius: 4px; justify-self: end; }
.msg a { color: var(--forest-lift); text-decoration: underline; text-underline-offset: 2px; }
.msg strong { font-weight: 600; }
.msg ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.45rem; }
.msg ol { padding-left: 1.2rem; margin: 0.5rem 0 0; display: grid; gap: 0.45rem; }
.msg li { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; }
.msg li::before { content: ""; width: 5px; height: 5px; border-radius: 0; background: var(--brass); margin-top: 0.6em; }
.chat-offer {
  display: flex; gap: 0.65rem; align-items: center; padding: 0.5rem;
  border: 1px solid var(--line); border-radius: 0; background: var(--surface);
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease);
}
.chat-offer:hover { transform: translateY(-2px); border-color: var(--brass); }
.chat-offer img { width: 56px; height: 44px; border-radius: 0; object-fit: cover; flex: none; }
.chat-offer b { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.chat-offer span { font-size: 0.76rem; color: var(--muted); }
.chat-typing { display: inline-flex; gap: 4px; align-items: center; padding: 0.85rem 0.9rem; }
.chat-typing i { width: 6px; height: 6px; border-radius: 0; background: var(--muted-soft); animation: blink 1.3s infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.18s; }
.chat-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-foot { border-top: 1px solid var(--line); background: var(--surface); }
.chat-chips { display: flex; gap: 0.4rem; padding: 0.65rem 0.75rem 0; overflow-x: auto; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips button {
  white-space: nowrap; padding: 0.35em 0.8em; border-radius: 0;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-size: 0.78rem; font-weight: 500;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chat-chips button:hover { background: var(--surface-2); border-color: var(--brass); }
.chat-form { display: flex; gap: 0.5rem; padding: 0.65rem 0.75rem 0.75rem; }
.chat-form input {
  flex: 1; min-width: 0; padding: 0.6em 0.9em; border-radius: 0;
  border: 1px solid var(--line-strong); background: var(--bg);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chat-form input:focus { outline: none; border-color: var(--brass-deep); box-shadow: var(--ring); }
.chat-form button {
  width: 40px; height: 40px; flex: none; border-radius: 0; border: 0; cursor: pointer;
  background: var(--forest); color: var(--on-dark); display: grid; place-items: center;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.chat-form button:hover { background: var(--forest-lift); transform: scale(1.06); }
.chat-form button svg { width: 17px; height: 17px; }
.chat-disclaimer { font-size: 0.68rem; color: var(--muted-soft); text-align: center; padding: 0 0.75rem 0.6rem; line-height: 1.4; }

/* =========================================================================
   obrazki z LQIP
   ========================================================================= */
.ph { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.ph > img { width: 100%; height: 100%; object-fit: cover; }
img[data-fade] { opacity: 0; transition: opacity 0.6s var(--ease); }
img[data-fade].is-loaded, .no-js img[data-fade] { opacity: 1; }
/* Galeria oferty: klik w miniaturę gasi duże zdjęcie do tła LQIP i
   pokazuje nowe dopiero po zdekodowaniu — bez twardego przeskoku. */
.offer-gallery__frame img { transition: opacity 0.22s var(--ease); }
.offer-gallery__frame img.is-swapping { opacity: 0; }

/* =========================================================================
   ruch
   ========================================================================= */
/* Bez stałego `will-change` na każdym [data-reveal] — animacja trwa
   ułamek sekundy raz na element, a stały `will-change` na kilkudziesięciu
   elementach kosztowałby pamięć GPU na telefonie bez żadnej korzyści. */
.no-js [data-reveal], .no-js [data-hero] > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   drobiazgi
   ========================================================================= */
.page-head { padding-top: clamp(7rem, 15vh, 10rem); }
.page-head h1 { font-size: var(--step-5); font-weight: 400; letter-spacing: -0.045em; line-height: 0.94; max-width: 16ch; }
.page-head h1 em { font-style: normal; font-weight: inherit; color: var(--muted); }
.page-head__lead { margin-top: var(--s4); max-width: 58ch; font-size: var(--step-1); line-height: 1.6; color: var(--muted); }

.rule { height: 1px; background: var(--line); border: 0; }
.stack { display: grid; gap: var(--s3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.center { text-align: center; justify-items: center; }
.updated { font-size: 0.76rem; color: var(--muted-soft); letter-spacing: 0.06em; }

/* =========================================================================
   panel /admin — podgląd danych, bez edycji
   ========================================================================= */
.admin-stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.admin-stat { background: var(--surface); padding: var(--s3); display: grid; gap: 0.3rem; }
.admin-stat b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.admin-stat span { font-size: var(--step--1); color: var(--muted); letter-spacing: 0.04em; }
/* Tabela nie miesci sie na telefonie (879px tresci w 348px kadru), a nakladkowe
   paski przewijania nie daja zadnego sygnalu. Wygaszona prawa krawedz mowi
   wprost, ze kolumny biegna dalej; cien tla nie zadziala, bo komorki tabeli
   maja wlasne, nieprzezroczyste tlo i zaslonilyby go. */
.admin-table-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--brass-deep) 55%, transparent) transparent;
}
.admin-table-wrap::-webkit-scrollbar { height: 6px; }
.admin-table-wrap::-webkit-scrollbar-track { background: var(--line-soft); }
.admin-table-wrap::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--brass-deep) 55%, transparent); }
@media (max-width: 900px) {
  .admin-table-wrap {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
}
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); white-space: nowrap; }
/* Nazwa oferty jest naglowkiem karty na telefonie; w tabeli na duzym ekranie
   nie ma dla niej miejsca (i tak jest tam Typ + Lokalizacja). */
.admin-cell-title { display: none; }
.admin-table th, .admin-table td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line-soft); }
.admin-table thead th {
  background: var(--forest-ink); color: var(--on-dark); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; border-bottom: none;
}
.admin-table tbody tr:hover { background: var(--surface-2); }
/* Telefon: osiem kolumn nie zmiesci sie w 360px, wiec wiersz rozklada sie na
   karte, a kazda komorka bierze naglowek z data-label. Bez poziomego
   przewijania i bez tresci uciekajacej poza kadr. */
@media (max-width: 720px) {
  .admin-table-wrap { border: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .admin-table { white-space: normal; display: block; }
  .admin-table thead { display: none; }
  .admin-table tbody { display: grid; gap: 10px; }
  .admin-table tr {
    display: grid; gap: 0.15rem;
    background: var(--surface); border: 1px solid var(--line);
    padding: 0.85rem 1rem;
  }
  .admin-table td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.32rem 0; border-bottom: 1px solid var(--line-soft);
    text-align: right;
  }
  .admin-table td::before {
    content: attr(data-label);
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted-soft);
    text-align: left; flex: none;
  }
  .admin-table td:last-child { border-bottom: 0; }
  .admin-table .admin-cell-title {
    display: block; order: -2; text-align: left;
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.25;
    padding: 0 0 0.5rem; border-bottom: 0;
  }
  .admin-table .admin-cell-status {
    justify-content: flex-start; gap: 0.15rem; text-align: left;
    order: -1; border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem; margin-bottom: 0.25rem; font-weight: 600;
  }
  .admin-table .admin-cell-status::before { content: none; }
  .admin-table td[data-label="Lokalizacja"] { font-weight: 600; }
}
.admin-num { font-variant-numeric: tabular-nums; }
.admin-dot { display: inline-block; width: 8px; height: 8px; margin-right: 0.4em; background: var(--muted-soft); }
.admin-dot--ok { background: var(--brass); }
.admin-dot--warn { background: var(--line-strong); border: 1px solid var(--muted); }
body.admin-page main { padding-bottom: var(--s5); }

/* -------------------------------------------------------------------------
   Panel /admin/ — stale lewe menu + obszar roboczy.
   Na telefonie menu skleja sie w poziomy pasek nad trescia.
   ------------------------------------------------------------------------- */
/* Panel to narzedzie, nie podstrona serwisu: publiczna nawigacja, stopka,
   widget czatu i pasek CTA tylko rozpraszaja i kradna miejsce u gory.
   Nawigacje przejmuje lewe menu panelu. */
body.admin-page { background: var(--surface-2); }
body.admin-page main { padding-bottom: 0; }
body.admin-page .site-header,
body.admin-page .site-footer,
body.admin-page .chat-fab,
body.admin-page .chat-panel,
body.admin-page .sticky-cta { display: none; }
/* Szesc kafli w stalej siatce 2/3 kolumn — auto-fit ukladal je 5+1
   i zostawial pol wiersza pustego tla. */
body.admin-page .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) {
  body.admin-page .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.admin-page .admin-stat b { font-size: var(--step-1); }

.adm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
}
@media (min-width: 900px) {
  .adm { grid-template-columns: 280px minmax(0, 1fr); }
}

.adm__side {
  position: sticky; top: 0; z-index: 30;
  padding: max(var(--s3), env(safe-area-inset-top)) var(--gutter) 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: grid; gap: var(--s3); align-content: start;
}
@media (min-width: 900px) {
  .adm__side {
    height: 100svh; gap: var(--s4);
    border-bottom: 0; border-right: 1px solid var(--line);
    padding: var(--s4);
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.adm__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
@media (min-width: 900px) { .adm__top { display: grid; gap: var(--s3); justify-items: start; } }
.adm__brand {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  letter-spacing: -0.02em;
}
.adm__brand em { font-style: italic; color: var(--brass-deep); }

/* Telefon: zakladki jada w poziomie (bez zawijania w dwa rzedy, ktore zjadaly
   pol ekranu), pasek przewija sie palcem i zatrzymuje na pozycji. */
.adm__nav {
  display: flex; gap: 1.3rem; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.adm__nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .adm__nav { display: grid; gap: 2px; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.adm__nav a {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.2em 0 0.7em;
  white-space: nowrap; scroll-snap-align: start;
  border-bottom: 2px solid transparent;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
@media (min-width: 900px) {
  .adm__nav a {
    gap: 0.7em; padding: 0.72em 0.9em;
    border-bottom: 0; border-left: 2px solid transparent;
  }
}
.adm__nav a svg { width: 1.05em; height: 1.05em; flex: none; color: var(--muted-soft); }
.adm__nav a:hover { background: var(--surface-2); color: var(--text); }
.adm__nav a[aria-current="page"] { border-bottom-color: var(--brass-deep); color: var(--text); }
.adm__nav a:hover { background: transparent; }
@media (min-width: 900px) {
  .adm__nav a:hover { background: var(--surface-2); }
  .adm__nav a[aria-current="page"] {
    background: color-mix(in oklch, var(--brass) 12%, transparent);
    border-left-color: var(--brass-deep);
  }
}
.adm__nav a[aria-current="page"] svg { color: var(--brass-deep); }

.adm__side-note { display: none; }
@media (min-width: 900px) { .adm__side-note { display: block; } }
.adm__side-note {
  font-size: 0.78rem; line-height: 1.6; color: var(--muted-soft);
  padding-top: var(--s3); border-top: 1px solid var(--line-soft);
}
@media (min-width: 900px) { .adm__side-note { align-self: end; margin-top: auto; } }

.adm__main {
  padding: var(--s4) var(--gutter) var(--s5);
  min-width: 0;
}
@media (min-width: 900px) { .adm__main { padding-top: var(--s5); } }
.adm-view { max-width: 1080px; }
.adm-view__head { margin-bottom: var(--s4); }
.adm-view__head h1, .adm-view__head h2 { font-size: var(--step-3); font-weight: 500; }
.adm-view__head em { font-style: italic; color: var(--brass-deep); }
.adm-view__lead { margin-top: 0.5rem; color: var(--muted); max-width: 60ch; }
.adm-view__note { margin-top: var(--s4); }
.adm-view__note--top { margin-top: 0; margin-bottom: var(--s4); }

.adm-sub {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--step-1); font-weight: 500;
  display: flex; align-items: baseline; gap: 0.6em;
}
.adm-sub span {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--brass-deep);
  border: 1px solid color-mix(in oklch, var(--brass) 45%, transparent);
  padding: 0.1em 0.55em;
}

/* --- formularze ---------------------------------------------------------- */
.adm-form {
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(var(--s3), 3vw, var(--s4));
}
.adm-grid { display: grid; gap: var(--s3); }
@media (min-width: 700px) { .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-field { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.adm-field--wide { grid-column: 1 / -1; }
.adm-field label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.adm-field input, .adm-field select, .adm-field textarea {
  width: 100%; padding: 0.7em 0.85em;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--bg); color: var(--text);
  font-size: var(--step--1); font-family: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.adm-field textarea { resize: vertical; line-height: 1.6; }
.adm-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23726c5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9em center;
}
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus {
  outline: none; border-color: var(--brass-deep);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brass) 24%, transparent);
}
.adm-field input::placeholder, .adm-field textarea::placeholder { color: var(--muted-soft); }
.adm-field__hint { font-size: 0.74rem; color: var(--muted-soft); }

.adm-form__foot {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--text);
  border-color: var(--line-strong); box-shadow: none;
}
.btn--ghost:hover { --btn-bg: var(--surface-2); background: var(--surface-2); border-color: var(--forest); }
@media (max-width: 560px) {
  .adm-form__foot > .btn { flex: 1 1 45%; justify-content: center; }
  .adm-form__state { flex: 1 1 100%; }
}
.adm-form__state {
  font-size: var(--step--1); color: var(--brass-deep);
  border-left: 2px solid var(--brass); padding-left: 0.75em;
}


/* `display: grid` robilo z kazdego <strong> i <code> osobny wiersz siatki —
   notatki z wtraceniem inline rozpadaly sie na kolumne pojedynczych slow.
   Odstep miedzy blokami dajemy tylko blokom. */
.notice {
  display: block; padding: var(--s3) var(--s4);
  border: 1px solid color-mix(in oklch, var(--brass) 40%, transparent); background: color-mix(in oklch, var(--brass) 6%, transparent); font-size: var(--step--1); line-height: 1.65;
}
.notice > :where(p, ul, ol, div, h3, h4) + :where(p, ul, ol, div, h3, h4) { margin-top: 0.4rem; }
.notice strong { font-weight: 600; }

/* Powrot na strone — panel ukrywa publiczna nawigacje, wiec musi dac wyjscie. */
.adm__back {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  transition: color 0.18s var(--ease);
}
.adm__back svg { width: 0.95em; height: 0.95em; transform: rotate(180deg); }
.adm__back:hover { color: var(--brass-deep); }

/* O nas — skróty do sekcji strony. Zwykłe linki kotwiczne, bez JS. */
.onas-skok {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em;
}
.onas-skok a { position: relative; padding-block: 0.3rem; color: var(--text); }
.onas-skok a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brass-deep); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.onas-skok a:hover::after { transform: scaleX(1); }
#kontakt, #biuro, #zakres, #kanaly { scroll-margin-top: 6rem; }

/* O nas — kanały biura jako lista wierszy: nazwa, dopisek, strzałka. */
.kanaly { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.kanaly a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 1.1rem; gap: var(--s3); align-items: center;
  padding-block: 1.15rem; border-bottom: 1px solid var(--line); color: var(--text);
  transition: color 180ms var(--ease);
}
.kanaly strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; }
.kanaly span { font-size: var(--step--1); color: var(--muted); }
.kanaly svg { width: 1.1rem; height: 1.1rem; color: var(--brass-deep); transition: transform 180ms var(--ease-out); }
.kanaly a:hover { color: var(--brass-deep); }
.kanaly a:hover svg { transform: translate(2px, -2px); }
.kanaly a:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }
@media (max-width: 520px) { .kanaly a { grid-template-columns: minmax(0, 1fr) 1.1rem; } .kanaly span { grid-column: 1; grid-row: 2; } }

/* Etapy współpracy (/wycena/) jako zwykła siatka: numer u góry, bez sztucznej
   wysokości karty z karuzeli — przy jednym zdaniu opisu robiła pustkę. */
.kroki { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step--siatka { flex: none; min-height: 0; grid-template-rows: auto; align-content: start; gap: var(--s3); }
.step--siatka .step__num { order: -1; justify-self: start; text-align: left; font-size: var(--step-3); padding-top: 0; border-top: 0; }

/* FAQ — płynne rozwinięcie odpowiedzi (Chromium 131+, reszta otwiera od razu).
   Tylko wysokość treści; tekst nie jedzie. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 0.46s var(--ease-calm, var(--ease-out)), content-visibility 0.46s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* =========================================================================
   zgody na pliki cookies (src/zgody.js)
   Mały prostokąt w lewym dolnym rogu (prawy zajmuje czat), na telefonie
   ta sama karta z marginesem od krawędzi. „Odrzuć" i „Akceptuj" mają tę
   samą wielkość i wagę — decyzja ma być równie łatwa w obie strony.
   Kategorie z opisem rozwija „Dostosuj".
   ========================================================================= */
.zgody {
  position: fixed; z-index: 140;
  left: clamp(0.75rem, 2.5vw, 1.75rem); bottom: clamp(0.75rem, 2.5vw, 1.75rem);
  width: min(calc(100vw - 1.5rem), 23rem);
  max-height: min(86vh, 44rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.zgody::before {
  content: ""; position: sticky; top: 0; display: block; height: 2px; width: 7rem;
  background: var(--brass); margin-bottom: -2px;
}
.zgody[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s; }
/* Rozwinięte kategorie potrzebują więcej miejsca niż samo pytanie. */
.zgody[data-szczegoly="true"] { width: min(calc(100vw - 1.5rem), 30rem); }
.zgody__in { padding: 1.1rem 1.15rem 0.9rem; display: grid; gap: 0.65rem; }
.zgody__tytul { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.15; }
.zgody__lead { font-size: 0.84rem; color: var(--muted); line-height: 1.55; }
.zgody__lead a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.zgody__lead a:hover { color: var(--brass-deep); }
.zgody__szczegoly { display: grid; gap: 0.6rem; }
.zgody__szczegoly[hidden] { display: none; }

.zgody__lista { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.zgody__kat { padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 0.25rem; }
.zgody__katTop { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.zgody__katTop strong { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; letter-spacing: -0.01em; }
.zgody__stan { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.zgody__kat:first-child .zgody__stan { color: var(--brass-deep); }
.zgody__narz { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.zgody__co { font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.zgody__uwaga { font-size: 0.74rem; line-height: 1.45; color: var(--muted); font-style: italic; }

/* przełącznik */
.zgody__switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.zgody__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.zgody__switch > span[aria-hidden] {
  width: 2.6rem; height: 1.4rem; border: 1px solid var(--line-strong); background: var(--bone-deep);
  position: relative; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.zgody__switch > span[aria-hidden]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px);
  background: var(--paper); box-shadow: var(--shadow-1);
  transition: transform 0.35s var(--ease-out);
}
.zgody__switch input:checked + span { background: var(--brass); border-color: var(--brass-deep); }
.zgody__switch input:checked + span::after { transform: translateX(1.2rem); }
.zgody__switch input:focus-visible + span { outline: 2px solid var(--brass-deep); outline-offset: 3px; }

.zgody__akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.15rem; }
.zgody__btn {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 2.75rem; padding: 0.6em 1em; border: 1px solid var(--forest); cursor: pointer;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), color 0.3s var(--ease);
}
.zgody__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right center; transition: transform 0.5s var(--ease-out);
}
.zgody__btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.zgody__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.zgody__btn:active { transform: scale(0.98); }
.zgody__btn--rej { background: var(--paper); color: var(--forest); }
.zgody__btn--rej::before { background: var(--forest); }
.zgody__btn--rej:hover { color: var(--on-dark); }
.zgody__btn--acc { background: var(--forest); color: var(--on-dark); }
.zgody__btn--acc::before { background: var(--forest-lift); }
.zgody__btn:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 3px; }

.zgody__zapisz { justify-self: start; background: none; border: 0; padding: 0.3rem 0; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--brass-deep); border-bottom: 1px solid currentColor; }
.zgody__zapisz:hover { color: var(--text); }
/* „Dostosuj" jest celowo cichsze niż dwie główne decyzje. */
.zgody__dostosuj {
  justify-self: center; background: none; border: 0; padding: 0.25rem 0.5rem; cursor: pointer;
  font-size: 0.78rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.zgody__dostosuj:hover { color: var(--text); }
.zgody__dostosuj:focus-visible, .zgody__zapisz:focus-visible, .zgody__lead a:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

@media (max-width: 560px) {
  .zgody { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; max-height: 80vh; }
  .zgody[data-szczegoly="true"] { width: auto; }
}
/* Na czas decyzji czat znika — na telefonie przykrywałby przyciski. */
.zgody-otwarte .chat-fab { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* Link „Ustawienia cookies" w stopce wygląda jak pozostałe linki. */
.footer-legal__btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.footer-legal__btn:hover { color: var(--brass); }

/* Tabela narzędzi w polityce prywatności. */
.cookie-tabela { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin-block: var(--s3); }
.cookie-tabela th, .cookie-tabela td { text-align: left; vertical-align: top; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--line); }
.cookie-tabela th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cookie-tabela td:first-child { font-weight: 600; width: 20%; }
.cookie-tabela td:nth-child(2) { width: 40%; }
@media (max-width: 640px) {
  .cookie-tabela thead { display: none; }
  .cookie-tabela tr { display: grid; gap: 0.2rem; padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
  .cookie-tabela td { border: 0; padding: 0; }
}

/* =========================================================================
   UX: jasne ścieżki do ofert
   ========================================================================= */

/* Pasek „Zobacz wszystkie nieruchomości" pod polecanymi. Cały jest linkiem;
   tło wypełnia się od lewej, strzałka dojeżdża. */
.more-link {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--s4); row-gap: 0.2rem;
  margin-top: clamp(var(--s3), 2.4vw, var(--s4));
  padding: clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--forest); color: var(--on-dark);
  box-shadow: var(--shadow-2);
  transition: box-shadow 0.4s var(--ease-out);
}
.more-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--forest-lift);
  transform: scaleX(0); transform-origin: right center; transition: transform 0.7s var(--ease-out);
}
.more-link:hover::before, .more-link:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.more-link:hover { box-shadow: var(--shadow-3); }
.more-link__lead { grid-column: 1; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.more-link__title { grid-column: 1; font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.more-link__meta { grid-column: 1; font-size: var(--step--1); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
/* Telefon: trzy wiersze tytułu w ciemnym pasie ważyły więcej niż same oferty. */
@media (max-width: 599px) { .more-link__title { font-size: var(--step-2); text-wrap: balance; } }
.more-link__arrow {
  grid-column: 2; grid-row: 1 / 4;
  display: grid; place-items: center; width: clamp(3.25rem, 6vw, 4.5rem); aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--on-dark) 30%, transparent); color: var(--brass);
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.more-link__arrow svg { width: 1.4rem; height: 1.4rem; }
.more-link:hover .more-link__arrow { transform: translateX(4px); background: var(--brass); color: var(--forest-ink); border-color: var(--brass); }

/* Tytuły kart bez dzielenia wyrazów — „zabudo-wie" w wąskiej kolumnie
   wyglądało na błąd, nie na typografię. */
.listing-card__title, .offer-card h3, .shead h2, .more-link__title { hyphens: manual; }

/* Lista ofert: cena w jednej linii, fakty pod nią — wcześniej ostatni fakt
   spadał samotnie do drugiego wiersza, wyśrodkowany pod resztą. */
.offer-card__line { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.offer-card__facts { gap: 0.3rem 0.9rem; }

/* Nagłówek nad ciemnymi sekcjami (pasmo kontaktu, stopka) przechodzi na
   ciemny wariant — jasny pasek na czerni wyglądał jak doklejony. */
.site-header[data-stuck="true"][data-tone="dark"] {
  background: color-mix(in oklch, var(--forest-ink) 84%, transparent);
  border-bottom-color: color-mix(in oklch, var(--on-dark) 10%, transparent);
  color: var(--on-dark);
}
.site-header[data-tone="dark"] .site-nav a,
.site-header[data-tone="dark"] .menu-btn { color: var(--on-dark); }
.site-header[data-tone="dark"] .menu-btn { border-color: color-mix(in oklch, var(--on-dark) 35%, transparent); }
.site-header[data-tone="dark"] .head-cta { --cta-bg: var(--brass); --cta-fg: var(--forest-ink); }
.site-header[data-tone="dark"] .head-cta:hover { --cta-bg: var(--brass-lift); }
.site-header .site-nav a, .site-header .menu-btn { transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.2s var(--ease-out); }
/* Na ciemnym (hero, pasmo kontaktu, stopka) kreska pod linkiem jasnym mosiądzem. */
.site-header--onHero[data-stuck="false"] .site-nav a::after,
.site-header[data-tone="dark"] .site-nav a::after { background: var(--brass); }

/* =========================================================================
   dopracowanie podstron
   ========================================================================= */
/* Nagłówki podstron: przy wadze 400 i -0.045em słowa się sklejały
   („Zadzwońalbo", „Ilenaprawdę"). Odrobinę cięższy krój, luźniejszy
   tracking i dodatkowy odstęp między słowami. */
.page-head h1 { font-weight: 460; letter-spacing: -0.032em; word-spacing: 0.06em; line-height: 0.98; hyphens: manual; }
.page-head { padding-bottom: clamp(0.5rem, 2vw, 1.5rem); }
.page-head__lead { margin-top: var(--s3); }
/* Lista ofert: nagłówek w jednej linii, żeby filtry i pierwsze karty były wyżej. */
.page-head--compact { padding-top: clamp(6.5rem, 12vh, 8rem); }
.page-head--compact h1 { font-size: var(--step-4); max-width: none; }

/* Lista ofert: przycisk filtra w jednej linii z polami, jak na stronie
   głównej — osobny wiersz na jeden przycisk to pusta przestrzeń. */
@media (min-width: 1100px) {
  .search-panel[data-tryb="filtruj"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: end; }
  .search-panel[data-tryb="filtruj"] .search-panel__actions { margin: 0; padding: 0; border: 0; flex-wrap: nowrap; }
  .search-panel[data-tryb="filtruj"] .search-panel__actions .btn { min-height: 3rem; }
}
/* Telefon: „Pokaż wyniki" i „Dobierz przez asystenta" na pełną szerokość —
   dwa przyciski różnej długości, oba urwane w połowie wiersza, wyglądały
   na przypadkowe. Wygodny cel dla kciuka. */
@media (max-width: 679px) {
  .search-panel[data-tryb="filtruj"] .search-panel__actions .btn { flex: 1 1 100%; justify-content: center; min-height: 3rem; }
  .listings__aiBtn { flex: 1 1 100%; justify-content: center; white-space: normal; text-align: center; }
}
.filters { margin-bottom: var(--s3); }

/* Karty listy: tytuł zawsze na 2 wiersze, treść od góry karty — cena
   i parametry stoją w każdym rzędzie na jednej linii. */
.offer-card { align-content: start; }
.offer-card h3 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: calc(1.22em * 2);
}

/* Strona oferty: najważniejsze parametry przy cenie. */
.offer-top__facts { list-style: none; padding: 0; margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.offer-top__facts li {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.9em; border: 1px solid var(--line); background: var(--surface);
  font-size: var(--step--1); font-weight: 500; font-variant-numeric: tabular-nums;
}
.offer-top__facts svg { width: 1.05em; height: 1.05em; color: var(--brass-deep); flex: none; }

/* Karty boczne: tytuł łamał się z odstępem całego akapitu. */
.side__who strong { line-height: 1.2; }

/* Zaślepka mapy: zamiast gładkiej pustej płyty — delikatna siatka jak na
   papierze milimetrowym i pulsująca pinezka. Nie udaje mapy (żadnych dróg
   ani nazw), tylko mówi „tu będzie mapa". */
.map-facade {
  background:
    radial-gradient(60% 70% at 50% 50%, color-mix(in oklch, var(--surface) 92%, transparent) 0%, transparent 72%),
    repeating-linear-gradient(0deg, color-mix(in oklch, var(--ink) 6%, transparent) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, color-mix(in oklch, var(--ink) 6%, transparent) 0 1px, transparent 1px 32px),
    var(--surface-2);
}
.map-facade__label svg { position: relative; overflow: visible; }
.map-facade__label { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .map-facade__label::before {
    content: ""; position: absolute; left: 0.55em; top: 50%; width: 0.6em; height: 0.6em;
    translate: -50% -50%; border: 1.5px solid var(--brass); border-radius: 50%;
    animation: md-ping 2.4s var(--ease-out) infinite; pointer-events: none;
  }
}
@keyframes md-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4); opacity: 0; } }

/* Stopka: przycisk czatu stoi nad paskiem prawnym (zapas od dołu), więc prawa
   krawędź paska zostaje na linii siatki, tak jak reszta strony. */
@media (max-width: 680px) { .footer-legal { padding-bottom: 5.5rem; } }

/* -------------------------------------------------- opinie: zwijanie
   Kafelek pokazuje 5 linii z wygaszeniem u dołu; „Czytaj całą opinię"
   rozwija płynnie do pełnej wysokości (max-height ustawia app.js na
   zmierzoną wysokość tekstu, więc przejście nie ma martwego czasu).
   Reguły działają tylko pod [data-zwin] — bez JS tekst jest cały. */
.opinie[data-zwin] .opinia__tresc {
  --linie: 5;
  overflow: hidden;
  max-height: calc(1.55em * var(--linie));
  transition: max-height 0.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.opinie[data-zwin] .opinia[data-open="true"] .opinia__tresc { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 759px) { .opinie[data-zwin] .opinia__tresc { --linie: 4; } }
.opinia { padding: clamp(1.25rem, 2.2vw, 1.9rem); gap: 0.85rem; }
.opinia__mark { font-size: clamp(2.2rem, 4.5vw, 2.9rem); }
.opinia__wiecej {
  justify-self: start; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4em;
  background: none; border: 0; padding: 0.2rem 0; cursor: pointer;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; color: var(--brass-deep);
  border-bottom: 1px solid color-mix(in oklch, var(--brass-deep) 45%, transparent);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.opinia__wiecej:hover { color: var(--text); border-bottom-color: var(--text); }
.opinia__wiecej[hidden] { display: none; }
.opinia__wiecej svg { width: 1em; height: 1em; transition: transform 0.4s var(--ease-out); }
.opinia[data-open="true"] .opinia__wiecej svg { transform: rotate(180deg); }
/* flex: 1 na cytacie rozciągał kafelek; zwinięte kafelki mają równą
   wysokość z natury, a podpis zostaje przy dole dzięki margin-top: auto. */
.opinie[data-zwin] .opinia blockquote { flex: none; }
.opinia figcaption { margin-top: auto; }
/* Osobne kafelki z odstępem zamiast wspólnej siatki z 1-px liniami: po
   rozwinięciu jednej opinii sąsiednie zostają zwinięte i niskie, zamiast
   rozciągać się pustym tłem do wysokości rozwiniętej. */
.opinie[data-zwin] { background: none; border: 0; gap: var(--s3); align-items: start; }
.opinie[data-zwin] .opinia { border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.opinie[data-zwin] .opinia__tresc {
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
          mask-image: linear-gradient(to bottom, #000 68%, transparent);
}
.opinie[data-zwin] .opinia[data-open="true"] .opinia__tresc { -webkit-mask-image: none; mask-image: none; }

/* =========================================================================
   o biurze — odnośnik do /o-nas/#zakres
   ========================================================================= */
.obiurze__in { display: grid; gap: var(--s4); align-items: end; }
.obiurze .shead { margin-bottom: 0; }
/* Nagłówek zajmuje tylko lewą kolumnę, więc jego kreska urywała się w połowie
   szerokości. Kreska idzie nad całym pasmem, nad nagłówkiem i akcjami. */
.obiurze__in, .obszar__in { border-top: 1px solid var(--line-strong); padding-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.obiurze .shead__rule, .obszar .shead__rule { display: none; }
.obiurze .shead, .obszar .shead { padding-top: 0; }
.obiurze .shead__lead { max-width: 52ch; }
@media (min-width: 960px) {
  .obiurze__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); }
  .obiurze__in .shead { grid-column: 1 / 7; }
  .obiurze__akcje { grid-column: 7 / -1; justify-content: flex-start; }
}

/* =========================================================================
   Dębina Park na głównej
   ========================================================================= */
.debina-home__in { display: grid; gap: clamp(var(--s4), 5vw, var(--s5)); align-items: center; }
.debina-home__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background-size: cover; }
.debina-home__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.debina-home .shead { margin-bottom: var(--s3); }
.debina-home .shead h2 { max-width: 18ch; }
.debina-home__cena {
  font-family: var(--font-display); font-size: var(--step-2); letter-spacing: -0.02em;
  color: var(--brass); font-variant-numeric: tabular-nums; margin-bottom: var(--s4);
}
@media (min-width: 960px) {
  .debina-home__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); }
  .debina-home__foto { grid-column: 1 / 7; aspect-ratio: 5 / 6; }
  .debina-home__tekst { grid-column: 7 / -1; }
}

/* =========================================================================
   obszar działania
   ========================================================================= */
.obszar__in { display: grid; gap: var(--s4); }
.obszar .shead { margin-bottom: 0; }
.obszar__prawa { display: grid; gap: var(--s4); align-content: end; }
.obszar__chipy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip--static { cursor: default; background: var(--surface); }
.chip--static:hover { transform: none; border-color: var(--line-strong); }
.chip--static svg { width: 1em; height: 1em; color: var(--brass-deep); }
@media (min-width: 960px) {
  .obszar__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); align-items: end; }
  .obszar__in .shead { grid-column: 1 / 7; }
  .obszar__prawa { grid-column: 7 / -1; }
}

/* =========================================================================
   artykuł z markdown — meta, karty porównawcze, blok CTA
   ========================================================================= */
.artykul__h1 { max-width: 22ch; font-size: var(--step-4); line-height: 1.04; }
.artykul__meta {
  margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem;
  font-size: var(--step--1); color: var(--muted-soft); letter-spacing: 0.06em; text-transform: uppercase;
}
.artykul__meta i { width: 4px; height: 4px; background: var(--brass); opacity: 0.8; }
.artykul.prose { font-size: var(--step-0); }
.artykul.prose > h2 { margin-top: clamp(var(--s4), 5vw, var(--s5)); font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.03em; }
.artykul.prose > p { margin-block: 0; margin-top: 1.05em; line-height: 1.75; }
.artykul.prose > ul { margin-top: 1.1em; }

.porownanie {
  display: grid; grid-template-columns: 1fr; gap: var(--s3);
  margin-top: var(--s4); max-width: none;
}
.porownanie__karta {
  padding: clamp(var(--s3), 3vw, var(--s4));
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.porownanie__karta:first-child { border-top: 2px solid var(--brass); }
.porownanie__karta:last-child { border-top: 2px solid var(--forest); }
.prose .porownanie__karta h3 { margin: 0; font-size: var(--step-1); }
.porownanie__karta p { margin-top: 0.6rem; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.6; }
@media (min-width: 760px) { .porownanie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.artykul-cta {
  margin-top: clamp(var(--s4), 6vw, var(--s5));
  padding: clamp(var(--s4), 5vw, var(--s5)) clamp(var(--s3), 5vw, var(--s5));
  background: var(--forest-ink); color: var(--on-dark);
  --text: var(--on-dark); --muted: color-mix(in oklch, var(--on-dark) 70%, transparent);
  box-shadow: var(--shadow-2);
}
.prose .artykul-cta h2 { margin-top: 0; font-size: var(--step-3); color: var(--on-dark); line-height: 1.1; }
.artykul-cta p { margin-top: var(--s3); color: var(--muted); line-height: 1.7; }
.artykul-cta .artykul-cta__sedno {
  margin-top: var(--s4); padding-left: var(--s3); border-left: 2px solid var(--brass);
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; color: var(--on-dark);
}
.artykul-cta__akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--s4); }
@media (max-width: 479px) { .artykul-cta__akcje .btn { flex: 1 1 100%; justify-content: center; } }

.artykul-domy__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.artykul-domy__head h2 { font-size: var(--step-3); }


.polityka h2 {
  font-size: var(--step-2); font-weight: 500; margin-top: 1.9em; margin-bottom: 0.5em; letter-spacing: -0.025em;
}

/* przyciski: wygodny cel dotyku na telefonie */
@media (max-width: 767px) {
  .btn { min-height: 2.9rem; }
  .cluster .btn { flex: 1 1 auto; justify-content: center; }
}

/* Lenis (desktop): płynne kółko myszy. Natywne scroll-behavior wyłączone,
   bo dwa wygładzania naraz dają szarpanie. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* Nakładki otwarte: przewijanie nie „przecieka” na stronę pod spodem. */
body[data-lock="true"] { overscroll-behavior: none; }
/* Na desktopie nagłówek ma ~100 px — kotwice zatrzymują się pod nim. */
@media (min-width: 960px) {
  section[id], #kontakt, #biuro, #zakres, #kanaly { scroll-margin-top: 7.25rem; }
}
.page-head .artykul__h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 22ch; }
.shead__lead a[href^="tel:"] { white-space: nowrap; }

/* Odstępy kolumn takie same jak w reszcie strony (--gcol), nie osobne 16/32 px. */
@media (min-width: 760px) {
  .opinie[data-zwin] { column-gap: var(--gcol); }
  .porady-grid { column-gap: var(--gcol); }
}

/* O nas: sekcja o biurze */
.biuro { display: grid; gap: var(--s5); }
@media (min-width: 960px) {
  .biuro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); align-items: start; }
  .biuro__lead { grid-column: 1 / 8; }
  .biuro__facts { grid-column: 9 / -1; }
}
.biuro__eyebrow, .biuro__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-deep);
}
.biuro__lead h2 { font-size: var(--step-4); font-weight: 400; letter-spacing: -0.04em; line-height: 1.08; margin-top: var(--s3); max-width: 18ch; }
.biuro__lead h2 em { font-style: normal; color: var(--muted); }
.biuro__text { margin-top: var(--s4); max-width: 56ch; color: var(--muted); }
.biuro__facts { margin: 0; border-top: 1px solid var(--line-strong); }
.biuro__facts div { display: grid; gap: 0.2rem; padding-block: 0.9rem; border-bottom: 1px solid var(--line-soft); }
.biuro__facts dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.biuro__facts dd { margin: 0; font-weight: 600; }
.biuro__label { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-strong); }
.zajmujemy { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .zajmujemy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .zajmujemy { grid-template-columns: repeat(3, 1fr); } }
.zajmujemy li {
  padding: var(--s4); background: var(--surface); border: 1px solid var(--line-soft);
  transition: transform var(--dur-component) var(--ease-out), box-shadow var(--dur-component) var(--ease-out);
}
.zajmujemy li:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.zajmujemy__ico svg { width: 1.9rem; height: 1.9rem; color: var(--brass-deep); }
.zajmujemy h3 { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; margin: var(--s3) 0 var(--s2); }
.zajmujemy p { color: var(--muted); font-size: var(--step--1); line-height: 1.65; margin: 0; }
.biuro__obszar { margin-top: var(--s5); display: grid; gap: 0.6rem; }
.zajmujemy--uslugi li { display: block; }
.zajmujemy--uslugi p + p { margin-top: 0.8em; }
.zajmujemy--uslugi p { font-size: var(--step-0); }
.biuro__text + .biuro__text { margin-top: var(--s3); }
.biuro__bloki { display: grid; margin-top: var(--s5); border-top: 1px solid var(--line-strong); }
.biuro__blok { display: grid; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); }
@media (min-width: 960px) { .biuro__blok { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gcol); } .biuro__blok h3 { grid-column: 1 / 5; } .biuro__blok > div { grid-column: 5 / 12; } }
.biuro__blok h3 { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.biuro__blok p { color: var(--muted); max-width: var(--measure); }
.biuro__blok p + p { margin-top: 1em; }
.biuro__dlaczego { margin-top: var(--s5); padding: var(--s4); background: var(--forest); color: var(--on-dark); }
.biuro__dlaczego h3 { font-size: var(--step-2); font-weight: 400; letter-spacing: -0.03em; }
.biuro__dlaczego ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: 0.7rem; }
.biuro__dlaczego li { display: flex; gap: 0.7rem; align-items: baseline; }
.biuro__dlaczego li svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--brass); transform: translateY(0.2em); }
.biuro__podpis { margin-top: var(--s3); font-family: var(--font-display); font-style: italic; font-size: var(--step-1); }
/* górny pasek z telefonem i e-mailem */
.topbar { font-size: var(--step--1); border-bottom: 1px solid var(--line-soft); }
.topbar__in { display: flex; justify-content: flex-end; gap: var(--s4); padding-block: 0.4rem; }
.topbar a { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 500; }
.topbar svg { width: 0.95em; height: 0.95em; color: var(--brass-deep); }
.site-header--onHero[data-stuck="false"] .topbar { border-bottom-color: color-mix(in oklch, var(--on-dark) 22%, transparent); }
.site-header--onHero[data-stuck="false"] .topbar a { color: var(--on-dark); }
.site-header--onHero[data-stuck="false"] .topbar svg { color: var(--brass); }
@media (max-width: 599px) { .topbar__in { justify-content: space-between; gap: var(--s2); } .topbar a { font-size: 0.78rem; } }
.cat__icon { width: 3.4rem; height: 3.4rem; }
.cat__icon svg { width: 1.7rem; height: 1.7rem; }
.cat__name { font-size: var(--step-2); }

/* /kontakt/: telefon wyraźnie pod nagłówkiem, adres i NIP małym drukiem */
/* Nagłówek-pytanie jest długi — o stopień mniejszy niż h1 innych podstron. */
.page-head h1.kontakt-h1 { font-size: var(--step-4); line-height: 1.04; max-width: 22ch; }
.kontakt-head { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.kontakt-head__tel {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 500;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text);
  transition: color var(--dur-micro, 180ms) var(--ease);
}
.kontakt-head__tel svg { width: 0.62em; height: 0.62em; color: var(--brass-deep); }
.kontakt-head__tel:hover { color: var(--brass-deep); }
.kontakt-head__mail { font-size: var(--step-0); }
.kontakt-head__drobne { margin-top: var(--s3); max-width: 68ch; font-size: 0.78rem; line-height: 1.6; color: var(--muted); }
/* kontakt: nagłówek bloku na dole podstron */
.pitch h2.kontakt__h { font-size: var(--step-3); max-width: 22ch; }
@media (prefers-reduced-motion: reduce) { .zajmujemy li:hover { transform: none; } }

/* ===== typografia podstron (polish 2026-10) ===== */
/* Jedna drabina nagłówków dla podstron: h1 strony wyraźnie dominuje,
   podtytuł jest osobnym, mniejszym stopniem (kursywa Fraunces, wyszarzona),
   h2 sekcji stoi o krok niżej niż h1, h2 w artykule jeszcze niżej.
   Interlinia nagłówków >= 1.08 — przy 0.94–0.98 daszki „Ś Ó Ż" i ogonki
   „ą ę j p" stykały się z sąsiednią linią. */
:root {
  --h1-page:    clamp(2.3rem, 1.6rem + 3.6vw, 5.25rem);   /* 37 / 40 / 77 px  (320 / 390 / 1440) */
  --h1-compact: clamp(2.1rem, 1.5rem + 2.6vw, 4rem);
  --h1-article: clamp(1.8rem, 1.3rem + 2.5vw, 3.5rem);    /* 29 / 31 / 56 px */
  --h1-sub:     clamp(1.3rem, 1.05rem + 1.25vw, 2.35rem); /* 21 / 22 / 35 px */
  --h2-section: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);  /* 28 / 29 / 52 px */
  --h2-minor:   clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);    /* 24 / 25 / 38 px */
  --h2-article: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);      /* 22 / 23 / 32 px */
  --lead-size:  clamp(1.0625rem, 0.98rem + 0.4vw, 1.3rem);
}

/* --- nagłówek podstrony: okruszki → h1 → podtytuł → lead → akcje --- */
.page-head h1 {
  font-size: var(--h1-page);
  font-weight: 460; line-height: 1.08; letter-spacing: -0.03em; word-spacing: 0.04em;
  max-width: 20ch; text-wrap: balance;
}
.page-head--compact h1 { font-size: var(--h1-compact); max-width: none; }
/* Podtytuł w h1 (O nas, Kontakt, Dębina Park, 404) — osobna linia, mniejszy
   stopień, kursywa. Wariant `br + em` łapie nagłówki wpisane w panelu
   z Enterem i *gwiazdkami*. */
.page-head__sub,
.page-head h1 br + em {
  display: block;
  margin-top: 0.4em;
  font-size: var(--h1-sub);
  font-style: italic; font-weight: 360;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.25; letter-spacing: -0.01em; word-spacing: 0;
  color: var(--muted);
  max-width: 32ch;
}
.page-head h1 br:has(+ em) { display: none; }
/* /porady/: „o nieruchomościach” (twarda spacja po „o”) ma ~8,9 em i do
   ~400 px nie mieściło się w linii — słowo łamało się w środku. Poniżej
   ~410 px nagłówek skaluje się z szerokością (wrap = 100vw − 2 × 1,25rem)
   zamiast stać na minimum. */
.page-head h1.porady-h1 { font-size: min(var(--h1-page), calc(11vw - 0.3rem)); }
.page-head__lead {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  max-width: 60ch;
  font-size: var(--lead-size); line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* O nas — skróty pod nagłówkiem. Na telefonie trzy linki zawijały się
   w poszarpany rząd; zamiast tego krótki spis treści, wiersz pod wierszem,
   każdy z wygodnym polem dotyku. */
.onas-skok { margin-top: clamp(2rem, 4vw, 3rem); gap: var(--s2) clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 599px) {
  .onas-skok { display: grid; gap: 0; padding-top: 0; }
  .onas-skok a { padding-block: 0.8rem; border-bottom: 1px solid var(--line-soft); }
  .onas-skok a::after { bottom: -1px; }
}

/* --- nagłówki sekcji: zawsze o krok niżej niż h1 strony --- */
.shead h2 { font-size: var(--h2-section); line-height: 1.1; }
.pitch h2 { font-size: var(--h2-section); line-height: 1.1; letter-spacing: -0.035em; }
.pitch h2.kontakt__h { font-size: var(--h2-minor); line-height: 1.18; letter-spacing: -0.025em; max-width: 24ch; }
.zlecenie h2 { line-height: 1.12; }
/* Pełne zdanie z „ludźmi, ich potrzebami…” — o stopień mniejsze, żeby zmieściło się bez łamania na pół ekranu. */
.biuro__lead h2 { font-size: var(--h2-minor); line-height: 1.18; letter-spacing: -0.03em; max-width: 26ch; }
.biuro__blok h3, .zajmujemy h3 { line-height: 1.2; }

/* --- artykuł (/porady/<slug>/) --- */
.page-head--artykul h1,
.page-head .artykul__h1 {
  font-size: var(--h1-article); line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch;
}
/* Okruszki: pełny tytuł artykułu w ścieżce dublował h1 pod spodem —
   jedna linia, reszta ucięta wielokropkiem. */
.page-head--artykul .crumbs { flex-wrap: nowrap; }
.page-head--artykul .crumbs span:last-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-head--artykul .crumbs a, .page-head--artykul .crumbs svg { flex: none; }
.artykul__meta { margin-top: clamp(1rem, 2vw, 1.5rem); line-height: 1.5; }
.page-head--artykul + .section--flushTop { padding-top: clamp(1.75rem, 4vw, 3rem); }
.artykul.prose > h2 {
  font-size: var(--h2-article); line-height: 1.2; letter-spacing: -0.022em;
  margin-top: clamp(2.25rem, 5vw, 3.5rem); max-width: 32ch;
}
.artykul.prose > h2 + p, .artykul.prose > h2 + ul { margin-top: 0.65em; }
.artykul.prose > :first-child { margin-top: 0; }
.artykul.prose h3 { font-size: var(--step-1); line-height: 1.25; }
.prose .artykul-cta h2 { font-size: var(--h2-minor); line-height: 1.15; }
.artykul-domy__head h2, .porady-inne__tytul { font-size: var(--h2-minor); line-height: 1.15; }
.artykul h2 { line-height: 1.2; }

/* --- polityka prywatności: h2 akapitów prawnych o stopień niżej --- */
.polityka h2 { font-size: var(--h2-article); line-height: 1.2; }
/* .prose (68ch) w .wrap-narrow (860px) centrowało się i odjeżdżało o ~45 px
   od h1 — tekst trzyma lewą krawędź nagłówka, długość linii zostaje 68ch. */
.polityka.prose { max-width: none; }
.polityka > * { max-width: var(--measure); }
.biuro__dlaczego h3 { line-height: 1.15; }

/* ===== odstęp pod przyklejonym nagłówkiem (polish 2026-10) =====
   Nagłówek z paskiem telefonu ma 101–140 px, a stały padding podstron
   (7–8 rem, przy niskim oknie jeszcze mniej) wpuszczał logo na okruszki.
   Wysokości z pomiaru, w CSS — nie z --head-h z app.js, bo padding
   zmieniany po starcie skryptu przesuwałby całą stronę (CLS). */
:root { --head-space: 6.375rem; }
@media (min-width: 768px) { :root { --head-space: 7rem; } }
@media (min-width: 960px) { :root { --head-space: 7.8rem; } }
@media (min-width: 1200px) { :root { --head-space: 8.75rem; } }
.page-head { padding-top: calc(var(--head-space) + clamp(1.25rem, 4vh, 3rem)); }
.page-head--compact { padding-top: calc(var(--head-space) + clamp(1rem, 3vh, 2.25rem)); }
.offer-top { padding-top: calc(var(--head-space) + clamp(1rem, 3vh, 2.25rem)); }
section[id], [id^="faq-p-"], #kontakt, #biuro, #zakres, #kanaly { scroll-margin-top: calc(var(--head-space) + 1rem); }
/* Telefon: „Rodzaj nieruchomości" łamało się na dwa wiersze obok
   jednowierszowego „Typ transakcji". Dopowiedzenie zostaje dla czytnika
   ekranu, wizualnie znika. */
@media (max-width: 599px) {
  .search-panel__dl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}