/* =============================================================================
   brand.css - kierunek wizualny: „ciepły gabinet, redakcyjny spokój"
   Gabinet Lekarski „Dusza" - dr Anna Koper, Łódź

   Diagnoza pierwszej wersji: geometryczny bezszeryf + siatka sześciu kart =
   dokładnie ten układ, który daje „domyślny" wygląd. Zmiana kierunku:
     * typografia: szeryf o miękkiej osi (Fraunces) w nagłówkach, grotesk
       o wyrazistym rysunku (Karla) w tekście - dwa fonty z charakterem,
       zero geometrycznych okrągłości;
     * struktura: INDEKS redakcyjny (numery 01-06 + włoskowate linie) zamiast
       kafelków; nagłówki sekcji numerowane i wyrównane do lewej;
     * materia: papierowe ziarno na tle, hairline'y zamiast obwódek kart.
   Ograniczenia niszy zostają: jasno, ciepło, powoli, zero ciemnych pasów.
   ============================================================================= */

:root {
  /* --- typografia --- */
  --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Karla', system-ui, sans-serif;

  /* --- paleta: atrament, szałwia, terakota na papierze --- */
  --color-bg: #FAF6EF;          /* papier, nie biel */
  --color-surface: #F2EDE3;
  --color-border: #DED3C2;
  --color-hairline: #C9BCA8;
  --color-sage: #E7ECE6;
  --color-cream: #F4EEE3;

  --text-strong: #1A1F1D;
  --text-body: #333B38;
  --text-muted: #6A736E;

  --lh-heading: 1.06;
  --lh-body: 1.68;
  --radius-lg: 4px;             /* prawie kanciasto - papier, nie aplikacja */
  --radius-md: 3px;
  --radius-pill: 999px;
  --section-gap: clamp(64px, 10vw, 128px);

  /* ruch: powolny (mapa niszy), zero parallaksy */
  --motion-dur: 320ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);

  --shadow-sm: none;
  --shadow-md: 0 18px 46px rgba(58, 44, 28, .12);
}

/* --- Typografia globalna ---------------------------------------------------- */
body {
  font-size: 17.5px;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  font-variant-numeric: oldstyle-nums;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;                                  /* szeryf trzyma wagę optycznie */
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 32;
  letter-spacing: -0.012em;
  font-variant-numeric: normal;
}
h1 { font-size: clamp(40px, 8.4vw, 76px); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 4.6vw, 42px); }
h3 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.005em; }
p { line-height: var(--lh-body); }
strong, b { font-weight: 700; }

/* papierowe ziarno na całej stronie (statyczne, zero kosztu animacji) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  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.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* --- Header ---------------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  border-bottom: 1px solid var(--color-hairline);
}
.site-header .brand { font-family: var(--font-heading); font-weight: 400;
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 20; font-size: 21px;
  letter-spacing: -0.015em; }
.site-header .brand small { font-family: var(--font-body); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
/* :not(.btn) - inaczej ta reguła nadpisuje kolor tekstu na CTA w navie
   i telefon na terakocie schodzi do kontrastu 2.02 (render_gate / L-058). */
nav[aria-label="Główna"] a:not(.btn) { font-size: 14px; color: var(--text-body);
  letter-spacing: .04em; position: relative; }
nav[aria-label="Główna"] a:not(.btn)::after {
  content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 12px;
  height: 1px; background: var(--text-strong); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-dur) var(--motion-ease); }
nav[aria-label="Główna"] a:not(.btn):hover::after,
nav[aria-label="Główna"] a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
nav[aria-label="Główna"] a.btn-primary { color: var(--color-accentText); font-size: 14px;
  letter-spacing: .02em; }
.nav-toggle { border-color: var(--color-hairline); border-radius: 2px; background: transparent; }

/* --- Przyciski: kanciaste, z hairline'em ----------------------------------- */
.btn { border-radius: 2px; font-family: var(--font-body); font-weight: 700;
  letter-spacing: .01em; font-size: 15.5px; }
.btn-ghost { border-color: var(--text-strong); }
.btn-ghost:hover { background: var(--text-strong); color: var(--color-bg); }

/* --- Rytm sekcji ----------------------------------------------------------- */
.section--sage { background: var(--color-sage); }
.section--cream { background: var(--color-cream); }

/* Nagłówek sekcji: numer + włoskowata linia + tytuł, wyrównanie do LEWEJ.
   .sec-head z bazy centruje - nadpisujemy świadomie (jeden, spójny kierunek). */
.sec-head { text-align: left; margin-inline: 0; max-width: 60ch; }
.sec-head > * { margin-inline: 0; }
.sec-head h2 { max-width: 18ch; margin-top: var(--space-3); }
/* blok naglowka bez leadu kleil sie do pierwszego akapitu sekcji */
.sec-head + .stack, .sec-head + .steps, .sec-head + .facts { margin-top: var(--space-6); }
.sec-head .lead { max-width: 54ch; color: var(--text-muted); margin-top: var(--space-5);
  font-size: 18px; }
.eyebrow { display: flex; align-items: center; gap: var(--space-4); margin-bottom: 0;
  color: var(--text-muted); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--color-hairline);
  max-width: 140px; }

/* =============================================================================
   HERO - zdjecie W TLE (pelny kadr) + ciepla zaslona.
   Nisza zabrania ciemnych, przygniatajacych pasow, wiec zamiast czarnego scrimu
   dajemy KREMOWA zaslone: ciemny tekst na rozjasnionym zdjeciu trzyma AA,
   a kadr zostaje widoczny. Bez nadtytulu, leadu i paska liczb (decyzja dyrektora).
   ============================================================================= */
.hero-bg {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(460px, 76svh, 720px);
  border-radius: 0 0 var(--radius-block) var(--radius-block);
}
.hero-bg > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 58% 52%; z-index: -2;
  animation: hero-drift 34s ease-in-out infinite alternate;   /* bardzo powolny oddech */
}
@keyframes hero-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.055) translate3d(-1.2%, -0.8%, 0); }
}
.hero-bg__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(250, 246, 239, .97) 0%,
      rgba(250, 246, 239, .93) 32%,
      rgba(250, 246, 239, .70) 56%,
      rgba(250, 246, 239, .28) 78%,
      rgba(250, 246, 239, .12) 100%),
    linear-gradient(180deg, rgba(250, 246, 239, .55) 0%, rgba(250, 246, 239, 0) 34%);
}
@media (max-width: 860px) {
  /* na waskim ekranie tekst lezy na srodku kadru - zaslona musi byc pionowa i mocniejsza */
  .hero-bg__scrim {
    background: linear-gradient(180deg,
      rgba(250, 246, 239, .97) 0%,
      rgba(250, 246, 239, .94) 46%,
      rgba(250, 246, 239, .78) 68%,
      rgba(250, 246, 239, .42) 100%);
  }
  .hero-bg > img { object-position: 60% 62%; }
}
.hero-bg__inner { width: 100%; padding-block: clamp(40px, 8vw, 96px); }
/* max-width TYLKO na tytul - na wrapperze scisnal klaster CTA i „Zadzwon: 665 047 641"
   lamal sie na dwie linie (L-062) */
.hero-bg__content { max-width: none; }
.hero-bg__title { text-wrap: balance; max-width: 13ch; }
.hero-bg__cta { margin-top: clamp(28px, 4vw, 44px); }
.hero-bg__cta .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .hero-bg { align-items: end; min-height: clamp(420px, 68svh, 560px); }
  .hero-bg__title { max-width: 11ch; }
}

/* Wejscie hero: tytul i CTA wjezdzaja od dolu, powoli (nisza: niski poziom pobudzenia).
   Animacja startuje NATYCHMIAST i konczy sie na opacity 1 - nigdy reveal/mask na H1
   (L-024: naglowek ma byc widoczny takze bez JS). Przy prefers-reduced-motion
   globalna regula z styles.css skraca ja do zera. */
.hero-bg__title, .hero-bg__cta { animation: hero-rise .9s var(--motion-ease) both; }
.hero-bg__cta { animation-delay: .18s; }
@keyframes hero-rise {
  from { opacity: .001; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================================
   INDEKS REDAKCYJNY - zamiast siatki sześciu kafelków.
   Numer 01-06, włoskowata linia, tytuł szeryfem, opis groteskiem. Na hover
   wiersz przesuwa się o 8px i ciemnieje linia - ruch minimalny, zgodny z niszą.
   ============================================================================= */
.index-list { margin-top: var(--space-8); border-top: 1px solid var(--color-hairline); }
.index-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-5);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--color-hairline);
  transition: border-color var(--motion-dur) var(--motion-ease);
}
@media (min-width: 860px) {
  /* 24ch na tytul - przy 15ch krotkie hasla lamaly sie na 3 linie i wiersz puchl */
  .index-row { grid-template-columns: 3.5rem minmax(0, 24ch) minmax(0, 1fr);
    align-items: baseline; gap: var(--space-6); padding: var(--space-5) 0; }
}
.index-row:hover { border-bottom-color: var(--text-strong); }
.index-row__num { font-family: var(--font-heading); font-size: 15px; color: var(--color-accent);
  font-variant-numeric: lining-nums; letter-spacing: .06em; padding-top: 2px; }
.index-row__title { font-family: var(--font-heading); font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 400; font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 24;
  color: var(--text-strong); line-height: 1.15; letter-spacing: -0.012em;
  transition: transform var(--motion-dur) var(--motion-ease); }
.index-row:hover .index-row__title { transform: translateX(6px); }
.index-row__desc { color: var(--text-muted); font-size: 16px; max-width: 46ch; }
@media (max-width: 859px) {
  .index-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .index-row__desc { grid-column: 2; }
}

/* --- Karty (używane tam, gdzie karta ma sens: fakty, „dlaczego my") -------- */
.card-grid { display: grid; gap: 0; grid-template-columns: 1fr;
  border-top: 1px solid var(--color-hairline); margin-top: var(--space-7); }
@media (min-width: 760px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: transparent; border: 0; border-bottom: 1px solid var(--color-hairline);
  border-radius: 0; padding: var(--space-6) var(--space-5) var(--space-6) 0;
  box-shadow: none;
}
@media (min-width: 760px) {
  .card-grid > .card:nth-child(odd) { padding-right: var(--space-7);
    border-right: 1px solid var(--color-hairline); }
  .card-grid > .card:nth-child(even) { padding-left: var(--space-7); }
}
.card h3 { font-size: 18px; margin-bottom: var(--space-3); }
.card p { font-size: 16px; color: var(--text-muted); max-width: none; }
.card__icon { width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--color-accent); margin-bottom: var(--space-4); }
.card__icon svg { width: 24px; height: 24px; stroke-width: 1.3; }

/* --- Kroki procesu: numeracja szeryfem, bez kółek --------------------------- */
.steps { display: grid; gap: 0; counter-reset: step;
  border-top: 1px solid var(--color-hairline); margin-top: var(--space-6); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5);
  align-items: start; padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-hairline); }
.step__num { counter-increment: step; width: auto; height: auto; border-radius: 0;
  background: transparent; color: var(--color-accent); font-family: var(--font-heading);
  font-size: 15px; font-variant-numeric: lining-nums; display: block; padding-top: 3px;
  min-width: 2.2rem; }
.step__num::before { content: "0" counter(step); }
.step h3 { font-size: 17px; margin-bottom: 5px; }
.step p { font-size: 16px; color: var(--text-muted); max-width: 46ch; }
.step__time { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--text-muted);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* --- Blok media + tekst ---------------------------------------------------- */
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 80px); } }
.split--flip .split__media { order: 2; }
@media (max-width: 879px) { .split--flip .split__media { order: 0; } }
.split__media img { width: 100%; height: auto; border-radius: 2px; }
.photo-note { font-size: 12px; color: var(--text-muted); margin-top: var(--space-3);
  letter-spacing: .06em; text-transform: uppercase; }

/* --- Kafle faktowe --------------------------------------------------------- */
.facts { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: var(--space-7);
  border-top: 1px solid var(--color-hairline); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-5) 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--color-hairline); border-radius: 0;
  align-items: start; box-shadow: none; }
@media (min-width: 760px) {
  .facts > .fact:nth-child(odd) { padding-right: var(--space-6);
    border-right: 1px solid var(--color-hairline); }
  .facts > .fact:nth-child(even) { padding-left: var(--space-6); }
}
.fact svg { width: 19px; height: 19px; stroke-width: 1.3; color: var(--color-accent);
  margin-top: 4px; }
.fact strong { display: block; font-size: 16.5px; color: var(--text-strong); margin-bottom: 4px;
  font-weight: 700; }
.fact span { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; }

/* --- Cennik: tabela redakcyjna z kropkowanym wypełnieniem ------------------ */
.price-list { display: grid; gap: 0; border: 0; border-top: 1px solid var(--text-strong);
  border-radius: 0; background: transparent; margin-top: var(--space-7); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5);
  padding: var(--space-5) 0; border-top: 0; border-bottom: 1px solid var(--color-hairline);
  align-items: baseline; }
.price-row__name { font-family: var(--font-heading); font-weight: 400;
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 22; font-size: 20px;
  color: var(--text-strong); letter-spacing: -0.01em; }
.price-row__desc { display: block; font-family: var(--font-body); font-size: 15px;
  color: var(--text-muted); margin-top: 5px; letter-spacing: 0; }
.price-row__val { font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--color-accent); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; }
.price-note { margin-top: var(--space-6); font-size: 14.5px; color: var(--text-muted);
  max-width: 58ch; }

/* --- FAQ: wiersze hairline, bez pudełek ------------------------------------ */
.faq-list { display: grid; gap: 0; max-width: 820px; margin-inline: 0;
  border-top: 1px solid var(--color-hairline); margin-top: var(--space-7); }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--color-hairline);
  border-radius: 0; overflow: hidden; }
.faq-item > summary { cursor: pointer; padding: var(--space-5) var(--space-5) var(--space-5) 0;
  font-family: var(--font-heading); font-weight: 400;
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 22; font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: -0.01em; color: var(--text-strong); list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5);
  align-items: center; min-height: 56px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ""; width: 14px; height: 14px; flex: none;
  background: linear-gradient(var(--color-accent), var(--color-accent)) center/100% 1px no-repeat,
              linear-gradient(var(--color-accent), var(--color-accent)) center/1px 100% no-repeat;
  transition: transform var(--motion-dur) var(--motion-ease); }
.faq-item[open] > summary::after { transform: rotate(90deg);
  background: linear-gradient(var(--color-accent), var(--color-accent)) center/100% 1px no-repeat; }
.faq-item > div { padding: 0 var(--space-6) var(--space-6) 0; }
.faq-item p { font-size: 16px; color: var(--text-muted); max-width: 62ch; }

/* --- Kontakt --------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
@media (min-width: 920px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px); } }
.hours { display: grid; gap: 0; margin-top: var(--space-4); }
.hours__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4);
  padding: 11px 0; border-top: 1px solid var(--color-hairline); font-size: 15.5px; }
.hours__row:first-child { border-top: 0; }
.hours__row span:last-child { color: var(--text-strong); font-weight: 700; white-space: nowrap;
  font-variant-numeric: lining-nums; }
.contact-form { display: grid; gap: var(--space-5); }
.field label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; }
.field input, .field textarea {
  border: 0; border-bottom: 1px solid var(--color-hairline); border-radius: 0;
  background: transparent; padding: var(--space-3) 0; }
.field input:focus { outline: 0; border-bottom-color: var(--text-strong); }
.contact-form .consent { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3); align-items: start; font-size: 13.5px; color: var(--text-muted);
  line-height: 1.6; }
.contact-form .consent input { margin-top: 3px; width: 18px; height: 18px; }
.map-embed { border-radius: 2px; overflow: hidden; border: 1px solid var(--color-hairline);
  margin-top: var(--space-6); }
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0;
  filter: saturate(.72) contrast(1.02); }

/* --- Stopka ---------------------------------------------------------------- */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--text-strong); }
.footer-grid { display: grid; gap: var(--space-7); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-8); } }
.site-footer h3 { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 700;
  margin-bottom: var(--space-5); }
.site-footer p, .site-footer a { font-size: 15.5px; color: var(--text-body); }
.site-footer .footer-nap p:first-of-type strong { font-family: var(--font-heading);
  font-weight: 400; font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 20; font-size: 19px;
  color: var(--text-strong); }
.site-footer a:hover { color: var(--text-strong); text-decoration: underline;
  text-underline-offset: 3px; }
.footer-nav { flex-direction: column; gap: 10px; margin-top: 0; }
.footer-help { margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline); font-size: 14px; color: var(--text-muted);
  max-width: 70ch; }
.footer-help strong { color: var(--text-strong); }
.footer-legal { margin-top: var(--space-5); font-size: 12.5px; color: var(--text-muted); }

/* --- Sticky CTA / breadcrumbs ---------------------------------------------- */
.mobile-cta { background: var(--color-bg); border-top: 1px solid var(--text-strong); }
.crumbs { font-size: 11.5px; color: var(--text-muted); padding-top: var(--space-6);
  letter-spacing: .12em; text-transform: uppercase; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { margin-inline: 8px; opacity: .5; }

/* --- H1 podstron ----------------------------------------------------------- */
main > .section:first-of-type h1 { max-width: 16ch; }

/* --- fx-tilt: w tej niszy tylko cień, bez przechyłu 3D ---------------------- */
.fx-tilt { transform: none !important; transition: opacity var(--motion-dur) var(--motion-ease); }

/* --- Zabezpieczenia mobile -------------------------------------------------- */
.brand-name { overflow-wrap: anywhere; }
.site-header .brand { min-width: 0; }
main { overflow-x: clip; }

/* =============================================================================
   ZAOKRAGLONE SEKCJE + ZBLENDOWANE TLO + PAKIET ANIMACJI
   (uwagi dyrektora, 2026-07-27)
   ============================================================================= */

:root { --radius-block: clamp(20px, 3.4vw, 44px); }

/* --- Tlo strony: miekkie plamy koloru zamiast plaskiego kremu --------------- */
/* fixed, wiec przy scrollu tresc plynie po stalym tle - „zblendowane", zero parallaksy */
body {
  background-color: #FAF6EF;
  background-image:
    radial-gradient(58vw 46vw at 8% -6%,  rgba(231, 236, 230, .95), transparent 62%),
    radial-gradient(46vw 40vw at 96% 16%, rgba(244, 238, 227, .95), transparent 60%),
    radial-gradient(66vw 52vw at 50% 58%, rgba(238, 232, 220, .70), transparent 66%),
    radial-gradient(50vw 44vw at 4% 96%,  rgba(231, 236, 230, .80), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* --- Sekcje jako zaokraglone bloki ----------------------------------------- */
/* Tinty sa POLPRZEZROCZYSTE - dzieki temu plamy tla przebijaja przez sekcje
   i strona czyta sie jako jedna, zblendowana plaszczyzna, a nie stos pasow. */
main > .section { border-radius: var(--radius-block); }
.section--sage, .section--cream {
  margin-inline: clamp(8px, 2.2vw, 28px);
  background: rgba(231, 236, 230, .62);
  backdrop-filter: blur(1px);
  border-radius: var(--radius-block);
}
.section--cream { background: rgba(246, 240, 229, .72); }
@media (min-width: 1240px) {
  .section--sage, .section--cream { margin-inline: clamp(28px, 4vw, 72px); }
}
.site-footer { border-radius: var(--radius-block) var(--radius-block) 0 0;
  margin-inline: clamp(8px, 2.2vw, 28px); border-top: 0;
  background: rgba(242, 237, 227, .88); }
@media (min-width: 1240px) { .site-footer { margin-inline: clamp(28px, 4vw, 72px); } }

/* obrazy w sekcjach dostaja to samo zaokraglenie co bloki - spojna miekkosc */
.split__media img, .map-embed { border-radius: clamp(14px, 2vw, 26px); }
.map-embed { border-color: transparent; }

/* =============================================================================
   ANIMACJE - budzet „sredni", wszystkie powolne (mapa niszy: odbiorca jest
   w napieciu, ruch ma uspokajac, nie pobudzac). Baza .is-in pochodzi
   z scripts.base.js (IntersectionObserver); tu tylko charakter ruchu.
   ============================================================================= */

/* 1. Reveal sekcji: dluzszy i lagodniejszy niz domyslny */
.reveal-ready [data-reveal] {
  transform: translateY(24px) scale(.995);
  transition: opacity .85s var(--motion-ease), transform .85s var(--motion-ease);
}
.reveal-ready [data-stagger] > * { transform: translateY(18px);
  transition: opacity .75s var(--motion-ease), transform .75s var(--motion-ease);
  transition-delay: calc(var(--i, 0) * 110ms); }

/* 2. Kreska przy nadtytule sekcji dorysowuje sie w prawo */
.eyebrow::after { transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--motion-ease) .15s; }
.sec-head.is-in .eyebrow::after, [data-reveal].is-in .eyebrow::after { transform: scaleX(1); }
.reveal-ready .eyebrow::after { will-change: transform; }

/* 3. Zdjecia sekcyjne: delikatne dojscie ze skali (bez parallaksy) */
.reveal-ready .split__media img { transform: scale(1.035);
  transition: transform 1.2s var(--motion-ease), opacity .85s var(--motion-ease); }
.reveal-ready .split__media.is-in img,
.reveal-ready .is-in .split__media img { transform: scale(1); }

/* 4. Wiersze indeksu: linia dojezdza od lewej przy wejsciu w kadr */
.index-row { position: relative; }
.index-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--text-strong); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-dur) var(--motion-ease); }
.index-row:hover::after { transform: scaleX(1); }

/* 5. Przyciski: uniesienie zamiast zmiany koloru */
.btn { transition: transform var(--motion-dur) var(--motion-ease),
                   background var(--motion-dur) var(--motion-ease),
                   color var(--motion-dur) var(--motion-ease),
                   box-shadow var(--motion-dur) var(--motion-ease); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(168, 82, 54, .28); }
.btn-ghost:hover { transform: translateY(-2px); }

/* 6. FAQ: odpowiedz rozwija sie plynnie (interpolate-size tam, gdzie wspierane) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: hidden;
    transition: block-size .45s var(--motion-ease), content-visibility .45s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}

/* 7. Szacunek dla preferencji ruchu - twardo wylaczamy WSZYSTKO wlasne */
@media (prefers-reduced-motion: reduce) {
  .hero-bg > img { animation: none; }
  .hero-bg__title, .hero-bg__cta { animation: none; opacity: 1; transform: none; }
  .eyebrow::after { transform: scaleX(1); transition: none; }
  .reveal-ready .split__media img { transform: none; transition: none; }
}

/* nota prawna pod cennikiem - wysrodkowana (uwaga dyrektora).
   p{max-width:65ch} z bazy trzyma waski blok przy lewej - stad margin-inline:auto. */
.price-note--center { text-align: center; margin-inline: auto; max-width: 62ch; }

/* =============================================================================
   KAFLE (runda 4 - dyrektor: „zbyt minimalistycznie")
   Nie wracamy do plaskich bialych pudelek z pierwszej wersji. Kafel ma cztery
   warstwy, ktore daja bogactwo bez halasu:
     1. cieply gradient powierzchni (papier -> krem), nie plaska biel;
     2. plakietka ikony - zaokraglony kwadrat z tintem i cienka obwodka;
     3. numer 01-06 jako duzy szeryfowy ZNAK WODNY w rogu (charakter z rundy 3);
     4. hairline + miekki cien, ktore na hover rosna - kafel sie „podnosi".
   Ten blok jest OSTATNI w pliku, wiec swiadomie nadpisuje hairline'owe wersje
   .card / .fact / .step / .faq-item / .price-list z gory.
   ============================================================================= */

/* --- Siatka kafli ---------------------------------------------------------- */
.tile-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr;
  border-top: 0; margin-top: var(--space-7); }
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Kafel ----------------------------------------------------------------- */
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid rgba(201, 188, 168, .55);
  border-radius: clamp(16px, 1.8vw, 22px);
  background:
    linear-gradient(158deg, rgba(255, 253, 249, .96) 0%, rgba(246, 240, 229, .92) 100%);
  box-shadow: 0 1px 2px rgba(58, 44, 28, .04), 0 10px 26px rgba(58, 44, 28, .05);
  transition: transform var(--motion-dur) var(--motion-ease),
              box-shadow var(--motion-dur) var(--motion-ease),
              border-color var(--motion-dur) var(--motion-ease);
}
.tile:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 82, 54, .38);
  box-shadow: 0 2px 4px rgba(58, 44, 28, .05), 0 22px 44px rgba(58, 44, 28, .11);
}
/* delikatna poswiata akcentu wjezdzajaca z gory przy hover */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 80% at 50% -20%, rgba(168, 82, 54, .10), transparent 62%);
  transition: opacity var(--motion-dur) var(--motion-ease);
}
.tile:hover::before { opacity: 1; }

/* numer jako znak wodny - charakter z rundy 3, tylko w innej formie */
.tile__num {
  position: absolute; top: clamp(10px, 1.2vw, 16px); right: clamp(16px, 1.8vw, 24px);
  font-family: var(--font-heading); font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 60;
  font-size: clamp(38px, 4.4vw, 54px); line-height: 1; letter-spacing: -0.03em;
  color: rgba(168, 82, 54, .13); font-variant-numeric: lining-nums;
  pointer-events: none; user-select: none;
}

/* plakietka ikony */
.tile__icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; margin-bottom: var(--space-5);
  background: linear-gradient(150deg, rgba(231, 236, 230, .95), rgba(216, 226, 216, .8));
  border: 1px solid rgba(47, 74, 69, .16);
  color: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.tile__icon svg { width: 23px; height: 23px; stroke-width: 1.5; }

.tile__title { font-family: var(--font-heading); font-weight: 400;
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 26;
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -0.012em;
  color: var(--text-strong); margin-bottom: var(--space-3); max-width: 15ch; }
.tile__desc { font-size: 15.5px; color: var(--text-muted); max-width: none; line-height: 1.62; }

/* --- Kroki jako kafle ------------------------------------------------------ */
.steps { display: grid; gap: clamp(12px, 1.4vw, 18px); border-top: 0;
  margin-top: var(--space-6); counter-reset: step; }
@media (min-width: 700px) and (max-width: 879px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tile--step { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4); align-items: start; padding: clamp(18px, 1.8vw, 24px); }
.tile--step .step__num {
  counter-increment: step; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px; padding: 0; min-width: 0;
  background: linear-gradient(150deg, var(--color-primary), #24403B);
  color: #F7F4EE; font-family: var(--font-heading); font-size: 14px;
  font-variation-settings: 'SOFT' 28, 'opsz' 16; font-variant-numeric: lining-nums;
  box-shadow: 0 3px 8px rgba(47, 74, 69, .24);
}
.tile--step .step__num::before { content: "0" counter(step); }
.tile--step h3 { font-size: 17px; margin-bottom: 5px; }
.tile--step p { font-size: 15.5px; color: var(--text-muted); max-width: 48ch; }

/* --- Kafle faktowe --------------------------------------------------------- */
.facts { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr;
  border-top: 0; margin-top: var(--space-7); }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact.tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5);
  align-items: start; padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(201, 188, 168, .55); border-radius: clamp(16px, 1.8vw, 22px); }
.facts > .fact:nth-child(odd), .facts > .fact:nth-child(even) {
  padding-inline: clamp(20px, 2vw, 28px); border-right: 1px solid rgba(201, 188, 168, .55); }
.fact.tile .tile__icon { margin-bottom: 0; width: 42px; height: 42px; }
.fact.tile .tile__icon svg { width: 21px; height: 21px; margin: 0; color: var(--color-primary); }
.fact strong { font-size: 16.5px; margin-bottom: 6px; }
.fact span { font-size: 15.5px; }

/* --- Karty „dlaczego my" (o-nas, cennik) ----------------------------------- */
.card-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); border-top: 0;
  grid-template-columns: 1fr; margin-top: var(--space-7); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-grid > .card {
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid rgba(201, 188, 168, .55);
  border-radius: clamp(16px, 1.8vw, 22px);
  background: linear-gradient(158deg, rgba(255, 253, 249, .96), rgba(246, 240, 229, .92));
  box-shadow: 0 1px 2px rgba(58, 44, 28, .04), 0 10px 26px rgba(58, 44, 28, .05);
  transition: transform var(--motion-dur) var(--motion-ease),
              box-shadow var(--motion-dur) var(--motion-ease);
}
.card-grid > .card:hover { transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(58, 44, 28, .05), 0 22px 44px rgba(58, 44, 28, .11); }
.card-grid > .card .card__icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: var(--space-5);
  background: linear-gradient(150deg, rgba(231, 236, 230, .95), rgba(216, 226, 216, .8));
  border: 1px solid rgba(47, 74, 69, .16); color: var(--color-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.card-grid > .card .card__icon svg { width: 23px; height: 23px; stroke-width: 1.5; }
.card-grid > .card h3 { font-family: var(--font-heading); font-weight: 400;
  font-variation-settings: 'SOFT' 28, 'WONK' 1, 'opsz' 26; font-size: 21px;
  letter-spacing: -0.012em; }

/* --- Cennik w panelu ------------------------------------------------------- */
.panel {
  border: 1px solid rgba(201, 188, 168, .55); border-top: 1px solid rgba(201, 188, 168, .55);
  border-radius: clamp(16px, 2vw, 24px); overflow: hidden;
  background: linear-gradient(168deg, rgba(255, 253, 249, .96), rgba(246, 240, 229, .92));
  box-shadow: 0 1px 2px rgba(58, 44, 28, .04), 0 14px 34px rgba(58, 44, 28, .06);
}
.price-row { transition: background var(--motion-dur) var(--motion-ease); }
.panel .price-row { padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid rgba(201, 188, 168, .45); border-top: 0; }
.panel .price-row:last-child { border-bottom: 0; }
.panel .price-row:hover { background: rgba(231, 236, 230, .38); }
.price-row__val { padding: 5px 12px; border-radius: 999px;
  background: rgba(168, 82, 54, .10); border: 1px solid rgba(168, 82, 54, .22);
  font-size: 11.5px; }

/* --- FAQ jako kafle -------------------------------------------------------- */
.faq-list { gap: clamp(10px, 1.2vw, 14px); border-top: 0; max-width: 880px; }
.faq-item {
  border: 1px solid rgba(201, 188, 168, .55); border-radius: clamp(14px, 1.6vw, 18px);
  background: linear-gradient(158deg, rgba(255, 253, 249, .96), rgba(246, 240, 229, .9));
  box-shadow: 0 1px 2px rgba(58, 44, 28, .04);
  transition: border-color var(--motion-dur) var(--motion-ease),
              box-shadow var(--motion-dur) var(--motion-ease);
}
.faq-item:hover, .faq-item[open] { border-color: rgba(168, 82, 54, .35);
  box-shadow: 0 10px 26px rgba(58, 44, 28, .07); }
.faq-item > summary { padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px); }
/* znak +/- w kwadratowej plakietce (zamiast golej strzalki) */
.faq-item > summary::after {
  width: 30px; height: 30px; border-radius: 9px;
  background-color: rgba(168, 82, 54, .10);
  background-image:
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 1px solid rgba(168, 82, 54, .22);
  transform: none;
}
.faq-item[open] > summary::after { background-size: 12px 1.5px, 0 0; transform: none; }
.faq-item > div { padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px); }

/* --- Godziny w panelu ------------------------------------------------------ */
.hours { padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  border: 1px solid rgba(201, 188, 168, .55); border-radius: clamp(14px, 1.6vw, 18px);
  background: linear-gradient(158deg, rgba(255, 253, 249, .96), rgba(246, 240, 229, .9)); }
.hours__row:first-child { border-top: 0; }

/* --- Kafle wchodza z lekkim uniesieniem ------------------------------------ */
.reveal-ready [data-stagger] > .tile,
.reveal-ready [data-stagger] > .card { transform: translateY(22px) scale(.985); }
.reveal-ready [data-stagger].is-in > .tile,
.reveal-ready [data-stagger].is-in > .card { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tile, .card-grid > .card, .faq-item { transition: none; }
  .tile:hover, .card-grid > .card:hover { transform: none; }
}

/* =============================================================================
   RUNDA 5 - zaokraglenia, korekta kolorow, sekcja „O gabinecie" na zdjeciu
   (uwagi dyrektora). Blok ostatni w pliku = nadpisuje wczesniejsze reguly.
   ============================================================================= */

/* --- KOLORY: paleta byla wyprana (wszystko w 5-10% nasycenia i podobnej jasnosci).
   Poglebiamy akcent i zielen, rozdzielamy jasnosci pasow, dodajemy trzeci,
   ciemniejszy odcien zieleni do plakietek. Kontrast CTA rosnie, nie spada. --- */
:root {
  --color-accent: #9C4225;          /* glebsza terakota - bylo #A85236 (kontrast z biela 6,1:1) */
  --color-accentHover: #86381F;
  --color-primary: #294540;         /* glebsza szalwia */
  --color-primary600: #1F3531;
  --color-sage: #DCE6DE;            /* wyrazniejszy pas zieleni */
  --color-cream: #F7EFDF;           /* cieplejszy pas kremu */
  --color-hairline: #C3B49C;
  --text-strong: #171D1B;
  --text-body: #2E3835;
  --text-muted: #5C6763;            /* ciemniejszy: opisy byly za blade */
}

/* tlo: mocniejsze plamy, zeby zaokraglone sekcje mialy sie na czym odcinac */
body {
  background-image:
    radial-gradient(58vw 46vw at 8% -6%,  rgba(220, 230, 222, .95), transparent 62%),
    radial-gradient(46vw 40vw at 96% 14%, rgba(247, 239, 223, .95), transparent 60%),
    radial-gradient(70vw 54vw at 50% 55%, rgba(238, 229, 213, .78), transparent 66%),
    radial-gradient(52vw 46vw at 2% 94%,  rgba(220, 230, 222, .85), transparent 62%);
}
.section--sage { background: rgba(220, 230, 222, .72); }
.section--cream { background: rgba(247, 239, 223, .78); }

/* --- PRZYCISKI: zaokraglone (pigulka) ------------------------------------- */
.btn {
  border-radius: 999px; padding-inline: clamp(22px, 2.4vw, 30px);
  min-height: 50px; font-size: 15.5px;
}
.btn-primary {
  background: linear-gradient(150deg, #A94B2A, var(--color-accent));
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(156, 66, 37, .22);
}
.btn-primary:hover { background: linear-gradient(150deg, var(--color-accent), var(--color-accentHover));
  box-shadow: 0 10px 24px rgba(156, 66, 37, .30); }
.btn-ghost { border-color: rgba(41, 69, 64, .38); color: var(--text-strong);
  background: rgba(255, 253, 249, .6); }
.btn-ghost:hover { background: var(--color-primary); color: #F7F4EE;
  border-color: var(--color-primary); }
nav[aria-label="Główna"] a.btn-primary { min-height: 42px; }
.nav-toggle { border-radius: 999px; }
.mobile-cta .btn { border-radius: 999px; }

/* --- SEKCJA KONTAKT: zaokraglona jak pozostale bloki ----------------------- */
main > .section.contact {
  margin-inline: clamp(8px, 2.2vw, 28px);
  border-radius: var(--radius-block);
  background: rgba(247, 239, 223, .62);
}
@media (min-width: 1240px) {
  main > .section.contact { margin-inline: clamp(28px, 4vw, 72px); }
}
/* formularz i dane kontaktowe w zaokraglonym panelu */
.contact-form { padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(195, 180, 156, .55); border-radius: clamp(16px, 1.8vw, 22px);
  background: linear-gradient(158deg, rgba(255, 253, 249, .96), rgba(247, 239, 223, .9));
  box-shadow: 0 1px 2px rgba(58, 44, 28, .04), 0 12px 30px rgba(58, 44, 28, .05); }
.contact-form .field input { border-radius: 999px; padding-inline: var(--space-5);
  border: 1px solid rgba(195, 180, 156, .7); background: rgba(255, 255, 255, .7); }
.contact-form .field input:focus { border-color: var(--color-accent); outline: none;
  box-shadow: 0 0 0 3px rgba(156, 66, 37, .14); }
.map-embed { border-radius: clamp(16px, 2vw, 24px); }

/* --- KAFLE: numer tylko tam, gdzie ma byc; plakietki ciemniejsze ----------- */
.tile__num { color: rgba(156, 66, 37, .16); }
.tile__icon {
  background: linear-gradient(150deg, rgba(41, 69, 64, .12), rgba(41, 69, 64, .06));
  border-color: rgba(41, 69, 64, .22); color: var(--color-primary); }
.tile:hover { border-color: rgba(156, 66, 37, .40); }

/* kroki: numer jak w kaflach powyzej (szeryfowy znak wodny), bez ciemnej plakietki */
.tile--step { grid-template-columns: minmax(0, 1fr); padding-right: clamp(56px, 6vw, 84px); }
.tile--step .step__num { display: none; }
.tile--step .tile__num { top: clamp(8px, 1vw, 14px); right: clamp(14px, 1.6vw, 22px);
  font-size: clamp(34px, 3.8vw, 46px); }

/* --- SEKCJA NA ZDJECIU („O gabinecie") ------------------------------------ */
.section--photo {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(8px, 2.2vw, 28px);
  border-radius: var(--radius-block);
  padding-block: clamp(64px, 9vw, 120px);
}
@media (min-width: 1240px) { .section--photo { margin-inline: clamp(28px, 4vw, 72px); } }
.section--photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 55%; z-index: -2; }
.section--photo__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* zaslona slabsza niz w hero - zdjecie ma byc CZYTELNE, a nie tylko sugerowane;
     tekst siedzi na jasnym kadrze wnetrza, wiec ciemny atrament trzyma AA */
  background:
    linear-gradient(180deg, rgba(250, 246, 239, .80) 0%, rgba(250, 246, 239, .68) 50%,
                    rgba(250, 246, 239, .82) 100%),
    radial-gradient(66% 62% at 50% 50%, rgba(250, 246, 239, .78), rgba(250, 246, 239, .40));
}
.section--photo__inner { display: grid; place-items: center; text-align: center; }
.section--photo .stack p { margin-inline: auto; }

/* --- Warianty wysrodkowane ------------------------------------------------- */
.sec-head--center { text-align: center; margin-inline: auto; max-width: 62ch; }
.sec-head--center > * { margin-inline: auto; }
.sec-head--center h2 { max-width: 20ch; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { content: ""; flex: 1; height: 1px;
  background: var(--color-hairline); max-width: 140px;
  transform: scaleX(0); transform-origin: right;
  transition: transform 1s var(--motion-ease) .15s; }
[data-reveal].is-in .eyebrow--center::before { transform: scaleX(1); }
.stack--center { text-align: center; max-width: 62ch; margin-inline: auto; }
.stack--center p { max-width: 58ch; }
.cluster--center { justify-content: center; }

/* --- Drobne wyrownania kolorystyczne -------------------------------------- */
.step__time, .index-row__num { color: var(--color-accent); }
.price-row__val { background: rgba(156, 66, 37, .10); border-color: rgba(156, 66, 37, .24); }
.faq-item > summary::after { background-color: rgba(156, 66, 37, .10);
  border-color: rgba(156, 66, 37, .24); }
.faq-item:hover, .faq-item[open] { border-color: rgba(156, 66, 37, .38); }
.site-footer { background: rgba(240, 232, 218, .9); }

/* pojedyncze kafle faktowe w kolumnie kontaktu (poza siatka .facts) */
.stack > .fact.tile { margin-bottom: 0; }
.stack > .fact.tile + .fact.tile { margin-top: var(--space-4); }

/* =============================================================================
   RUNDA 6 - drugi kolor przewodni + wyrazistszy font tekstowy
   Diagnoza: paleta stala na jednej rodzinie (szalwia + terakota to sasiedzi
   w cieple), wiec strona czytala sie monochromatycznie. Wprowadzamy TRZECI,
   swiadomie odlegly kolor: gleboki atramentowy blekit. Chlodny wzgledem
   terakoty, ciemniejszy od szalwii - daje realny kontrast, a nie kolejny odcien.
   Rola: nadtytuly, plakietki ikon, panele godzin, stopka, numery krokow.
   Font tekstowy Karla -> Space Grotesk: szersze swiatlo, charakterystyczne
   „a", „g" i cyfry - obok szeryfowego Fraunces daje wyrazna pare, nie duet
   dwoch neutralnych groteskow.
   ============================================================================= */

:root {
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* drugi kolor przewodni */
  --color-ink-blue: #22405F;
  --color-ink-blue-700: #1A3149;
  --color-ink-blue-100: #E4EAF1;
}

body { font-size: 17px; letter-spacing: -0.005em; }
p { line-height: 1.66; }
.btn { letter-spacing: 0; font-weight: 500; }
h3 { font-weight: 600; }

/* --- Blekit jako drugi glos ------------------------------------------------ */
.eyebrow { color: var(--color-ink-blue); }
.eyebrow::after, .eyebrow--center::before { background: rgba(34, 64, 95, .45); }

.tile__icon {
  background: linear-gradient(150deg, var(--color-ink-blue-100), rgba(228, 234, 241, .55));
  border-color: rgba(34, 64, 95, .26);
  color: var(--color-ink-blue);
}
.card-grid > .card .card__icon {
  background: linear-gradient(150deg, var(--color-ink-blue-100), rgba(228, 234, 241, .55));
  border-color: rgba(34, 64, 95, .26);
  color: var(--color-ink-blue);
}
.tile__num { color: rgba(34, 64, 95, .15); }
.tile:hover { border-color: rgba(34, 64, 95, .40); }
.tile:hover::before {
  background: radial-gradient(120% 80% at 50% -20%, rgba(34, 64, 95, .09), transparent 62%);
}

/* pasy sekcji: jeden szalwiowy, jeden chlodny blekitny - rytm ma dwa glosy */
.section--sage { background: rgba(228, 234, 241, .58); }
.section--cream { background: rgba(247, 239, 223, .78); }

/* --- Stopka na blekicie ---------------------------------------------------- */
.site-footer {
  background: linear-gradient(168deg, var(--color-ink-blue), var(--color-ink-blue-700));
  color: rgba(238, 242, 246, .88);
  border-radius: var(--radius-block) var(--radius-block) 0 0;
}
.site-footer h3 { color: rgba(238, 242, 246, .58); }
.site-footer p, .site-footer a { color: rgba(238, 242, 246, .9); }
.site-footer .footer-nap p:first-of-type strong { color: #FBF8F3; }
.site-footer a:hover { color: #FFFFFF; }
.footer-help, .footer-legal { color: rgba(238, 242, 246, .72); }
.footer-help { border-top-color: rgba(238, 242, 246, .22); }
.footer-help strong { color: #FBF8F3; }

/* --- Panel godzin w sekcji kontaktu ---------------------------------------- */
.hours-title {
  font-family: var(--font-body); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; color: var(--color-ink-blue);
  margin-bottom: var(--space-4);
}
.hours {
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  border: 1px solid rgba(34, 64, 95, .18);
  border-radius: clamp(16px, 1.8vw, 22px);
  background: linear-gradient(158deg, rgba(255, 253, 249, .96), var(--color-ink-blue-100));
  box-shadow: 0 1px 2px rgba(58, 44, 28, .04), 0 12px 30px rgba(34, 64, 95, .07);
  margin-top: 0;
}
.hours__row { padding: 13px 0; border-top: 1px dashed rgba(34, 64, 95, .22); font-size: 16px; }
.hours__row:first-child { border-top: 0; }
.hours__row span:last-child { color: var(--color-ink-blue); }

/* --- Kroki: numer w blekicie ---------------------------------------------- */
.tile--step .tile__num { color: rgba(34, 64, 95, .17); }

/* --- Sekcja kontaktu: dwie rowne kolumny ---------------------------------- */
main > .section.contact { background: rgba(247, 239, 223, .58); }
@media (min-width: 920px) {
  .contact-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start; }
}

/* --- Formularz zostal tylko na /kontakt/ ---------------------------------- */
.contact-form .field input:focus { border-color: var(--color-ink-blue);
  box-shadow: 0 0 0 3px rgba(34, 64, 95, .16); }

/* --- Sekcja na zdjeciu: dwa warianty zaslony ------------------------------ */
/* „Przebieg" ma NA SOBIE kafle, wiec zaslona musi byc mocniejsza niz w sekcji
   „O gabinecie", gdzie lezy sam tekst. */
.section--photo.process .section--photo__scrim {
  background:
    linear-gradient(180deg, rgba(250, 246, 239, .90) 0%, rgba(250, 246, 239, .84) 50%,
                    rgba(250, 246, 239, .90) 100%),
    radial-gradient(70% 66% at 50% 50%, rgba(250, 246, 239, .84), rgba(250, 246, 239, .62));
}
.section--photo.process .steps { max-width: 940px; margin-inline: auto; }
@media (min-width: 900px) {
  .section--photo.process .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Focus / zaznaczenie w drugim kolorze --------------------------------- */
:where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--color-ink-blue);
}
::selection { background: rgba(34, 64, 95, .16); }

/* stopka ma teraz DWIE kolumny (godziny przeniesione do sekcji kontaktu) */
@media (min-width: 780px) {
  .footer-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* =============================================================================
   RUNDA 7 - jednolite tlo, przycisk z ikona telefonu, kafle „Zaufanie" bez ikon
   ============================================================================= */

/* --- TLO: jedna plaszczyzna --------------------------------------------------
   Bylo: cztery radial-gradienty + polprzezroczyste tinty sekcji, wiec kazdy pas
   mial inna barwe i strona „falowala". Teraz JEDEN kolor papieru pod wszystkim
   i JEDEN, staly tint na sekcjach wyroznionych. Ziarno zostaje - jest rownomierne
   na calej powierzchni, wiec nie lamie jednolitosci. */
body {
  background-color: #FAF6EF;
  background-image: none;
  background-attachment: scroll;
}

:root { --color-band: #F2EDE3; }   /* jedyny tint sekcji na calej stronie */

.section--sage,
.section--cream,
main > .section.contact { background: var(--color-band); }

/* kafle: plaska powierzchnia zamiast gradientu - spojnie z jednolitym tlem */
.tile,
.card-grid > .card,
.faq-item,
.panel,
.hours,
.contact-form { background: #FFFDF9; }

/* zaslony sekcji ze zdjeciem - jednolita krycia, bez radialnego rozjasnienia */
.section--photo__scrim { background: rgba(250, 246, 239, .84); }
.section--photo.process .section--photo__scrim { background: rgba(250, 246, 239, .90); }

/* --- Przycisk: ikona telefonu zamiast slowa „Zadzwon" ---------------------- */
.btn__ico { display: inline-grid; place-items: center; width: 19px; height: 19px; flex: none; }
.btn__ico svg { width: 19px; height: 19px; display: block; }
.btn { gap: .6em; }
.btn-primary span:not(.btn__ico) { font-variant-numeric: lining-nums; letter-spacing: .01em; }
nav[aria-label="Główna"] a.btn-primary .btn__ico { width: 17px; height: 17px; }
nav[aria-label="Główna"] a.btn-primary .btn__ico svg { width: 17px; height: 17px; }

/* --- Kafle „Zaufanie" bez ikon -------------------------------------------- */
/* Bez plakietki kafel traci punkt zaczepienia dla oka, wiec dostaje w zamian
   cienka pionowa kreske akcentu przy krawedzi - sygnal, nie ozdobnik. */
.tile--noicon { grid-template-columns: minmax(0, 1fr) !important;
  padding-left: clamp(24px, 2.4vw, 32px); position: relative; }
.tile--noicon::after {
  content: ""; position: absolute; left: 0; top: clamp(20px, 2vw, 28px);
  bottom: clamp(20px, 2vw, 28px); width: 3px; border-radius: 0 3px 3px 0;
  background: var(--color-ink-blue); opacity: .55;
  transition: opacity var(--motion-dur) var(--motion-ease);
}
.tile--noicon:hover::after { opacity: 1; }
.tile--noicon strong { font-size: 17.5px; }

/* =============================================================================
   RUNDA 8 - kadr hero, tekstura zamiast zdjecia, dwie ciemne sekcje
   ============================================================================= */

/* --- HERO: kadr nizej, zeby fotele byly widoczne -------------------------- */
.hero-bg > img { object-position: 56% 72%; }
@media (max-width: 860px) { .hero-bg > img { object-position: 58% 78%; } }
/* zaslona po prawej lzejsza - to tam siedza fotele */
.hero-bg__scrim {
  background:
    linear-gradient(100deg,
      rgba(250, 246, 239, .96) 0%,
      rgba(250, 246, 239, .90) 30%,
      rgba(250, 246, 239, .58) 54%,
      rgba(250, 246, 239, .18) 76%,
      rgba(250, 246, 239, .06) 100%),
    linear-gradient(180deg, rgba(250, 246, 239, .50) 0%, rgba(250, 246, 239, 0) 32%);
}

/* --- SEKCJA Z TEKSTURA (zamiast zdjecia w tle) ---------------------------- */
/* Tkanina: dwie skosne siatki nitek + ziarno. Czysty CSS, zero dodatkowych
   requestow, spojne z papierowym charakterem reszty strony. */
.section--texture {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(8px, 2.2vw, 28px);
  border-radius: var(--radius-block);
  padding-block: clamp(64px, 9vw, 116px);
  background: #F1EADE;
}
@media (min-width: 1240px) { .section--texture { margin-inline: clamp(28px, 4vw, 72px); } }
.section--texture__weave {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(34, 64, 95, .055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(120, 96, 66, .05) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%);
}
.section--texture .section--photo__inner,
.section--texture .container > div { position: relative; }

/* --- SEKCJE CIEMNE --------------------------------------------------------
   Uwaga projektowa: mapa niszy odradza ciemne pasy (podnosza pobudzenie
   u odbiorcy, ktory juz jest w napieciu). Wprowadzone na wyrazne polecenie
   dyrektora - w kolorze stopki, wiec strona ma spojna „ciemna rodzine",
   a nie przypadkowy czarny pas. Kontrast tekstu pilnowany na renderze. */
.section--dark {
  background: linear-gradient(168deg, var(--color-ink-blue), var(--color-ink-blue-700));
  color: rgba(238, 242, 246, .90);
  margin-inline: clamp(8px, 2.2vw, 28px);
  border-radius: var(--radius-block);
}
@media (min-width: 1240px) { .section--dark { margin-inline: clamp(28px, 4vw, 72px); } }
main > .section.contact.section--dark { background: linear-gradient(168deg, var(--color-ink-blue), var(--color-ink-blue-700)); }

.section--dark h2, .section--dark h3, .section--dark strong { color: #FBF8F3; }
.section--dark .lead, .section--dark p { color: rgba(238, 242, 246, .82); }
.section--dark .eyebrow { color: rgba(238, 242, 246, .62); }
.section--dark .eyebrow::after, .section--dark .eyebrow--center::before {
  background: rgba(238, 242, 246, .34); }

/* kafle na ciemnym: szklane, nie biale plamy */
.section--dark .tile,
.section--dark .fact.tile,
.section--dark .card {
  background: rgba(255, 253, 249, .07);
  border-color: rgba(238, 242, 246, .20);
  box-shadow: none;
}
.section--dark .tile:hover,
.section--dark .fact.tile:hover {
  background: rgba(255, 253, 249, .12);
  border-color: rgba(238, 242, 246, .38);
  box-shadow: 0 18px 40px rgba(8, 20, 33, .35);
}
.section--dark .tile::before { display: none; }
.section--dark .tile strong,
.section--dark .tile__title { color: #FBF8F3; }
.section--dark .tile span,
.section--dark .tile__desc { color: rgba(238, 242, 246, .78); }
.section--dark .tile--noicon::after { background: #D98A5F; opacity: .85; }
.section--dark .tile__num { color: rgba(238, 242, 246, .16); }
.section--dark .tile__icon {
  background: rgba(255, 253, 249, .10); border-color: rgba(238, 242, 246, .26);
  color: #EEF2F6; }

/* dane kontaktowe i godziny na ciemnym */
.section--dark .fact a { color: #F0C6A8; text-decoration: underline;
  text-underline-offset: 3px; }
.section--dark .fact a:hover { color: #FFFFFF; }
.section--dark .fact svg { color: #E8A87C; }
.section--dark .hours-title { color: rgba(238, 242, 246, .62); }
.section--dark .hours {
  background: rgba(255, 253, 249, .07); border-color: rgba(238, 242, 246, .20);
  box-shadow: none; }
.section--dark .hours__row { border-top-color: rgba(238, 242, 246, .22);
  color: rgba(238, 242, 246, .84); }
.section--dark .hours__row span:last-child { color: #FBF8F3; }

/* przyciski na ciemnym */
.section--dark .btn-ghost { border-color: rgba(238, 242, 246, .45);
  color: #FBF8F3; background: transparent; }
.section--dark .btn-ghost:hover { background: #FBF8F3; color: var(--color-ink-blue);
  border-color: #FBF8F3; }

/* stopka styka sie z ciemna sekcja kontaktu - odsuwamy ja, zeby nie zlaly sie
   w jedna plame */
main > .section.contact.section--dark { margin-bottom: clamp(20px, 3vw, 40px); }

/* =============================================================================
   RUNDA 9 - sekcje na cala szerokosc (koniec zaokraglonych blokow) + mniejsza stopka
   ============================================================================= */

/* --- Sekcje pelnej szerokosci --------------------------------------------
   Zaokraglone bloki z marginesem bocznym zamieniamy na pasy edge-to-edge:
   czysty rytm poziomy, zero „kart" na poziomie layoutu. Zaokraglenia zostaja
   TYLKO tam, gdzie sa elementem UI (kafle, panele, przyciski, zdjecia). */
main > .section,
.section--sage,
.section--cream,
.section--dark,
.section--texture,
.section--photo,
main > .section.contact,
main > .section.contact.section--dark,
.hero-bg,
.site-footer {
  margin-inline: 0 !important;
  border-radius: 0 !important;
}
main > .section.contact.section--dark { margin-bottom: 0 !important; }

/* --- Stopka: mniejsza i zwarta -------------------------------------------- */
.site-footer { padding-block: clamp(32px, 4vw, 48px); }
.footer-grid { gap: clamp(24px, 3vw, 40px); }
@media (min-width: 780px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.site-footer h3 { font-size: 10.5px; letter-spacing: .18em; margin-bottom: var(--space-3); }
.site-footer p, .site-footer a { font-size: 14px; line-height: 1.55; }
.site-footer .footer-nap p:first-of-type strong { font-size: 16.5px; }
.site-footer .footer-nap p { margin-bottom: 2px; }
.footer-nav { gap: 6px; }
.footer-help {
  margin-top: clamp(24px, 3vw, 34px); padding-top: var(--space-4);
  font-size: 12.5px; line-height: 1.5; max-width: 78ch;
}
.footer-legal { margin-top: var(--space-3); font-size: 11.5px; }

/* --- Drobiazgi po zmianie na pelna szerokosc ------------------------------ */
/* hero traci dolne zaokraglenie, wiec styk z pierwsza sekcja musi byc czysty */
.hero-bg { overflow: hidden; }
/* pas ciemny stykajacy sie ze stopka: cienka linia, zeby nie zlaly sie w plame */
main > .section.contact.section--dark + * ,
.site-footer { border-top: 1px solid rgba(238, 242, 246, .16); }

/* =============================================================================
   RUNDA 10 - czarna stopka, niebieski pasek menu, zblendowane pasy jasne
   ============================================================================= */

/* --- PASEK MENU w blekicie ------------------------------------------------- */
.site-header {
  background: var(--color-ink-blue);
  border-bottom: 1px solid rgba(238, 242, 246, .14);
  backdrop-filter: none;
}
.site-header .brand,
.site-header .brand-name { color: #FBF8F3; }
.site-header .brand small,
.site-header .brand .brand-tagline { color: rgba(238, 242, 246, .60); }
nav[aria-label="Główna"] a:not(.btn) { color: rgba(238, 242, 246, .88); }
nav[aria-label="Główna"] a:not(.btn):hover { color: #FFFFFF; }
nav[aria-label="Główna"] a:not(.btn)::after { background: #FFFFFF; }
.nav-toggle { border-color: rgba(238, 242, 246, .34); background: transparent; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after { background: #FBF8F3; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
/* rozwiniete menu mobilne tez na blekicie - inaczej bialy panel pod granatowym paskiem */
@media (max-width: 767px) {
  nav[aria-label="Główna"] {
    background: var(--color-ink-blue);
    border-bottom: 1px solid rgba(238, 242, 246, .16);
  }
}
.site-header.nav-collapsed nav[aria-label="Główna"] {
  background: var(--color-ink-blue);
  border-bottom: 1px solid rgba(238, 242, 246, .16);
}

/* --- STOPKA czarna --------------------------------------------------------- */
.site-footer {
  background: #0E0F10;
  border-top: 1px solid rgba(238, 242, 246, .12);
  color: rgba(236, 236, 234, .82);
}
.site-footer h3 { color: rgba(236, 236, 234, .48); }
.site-footer p, .site-footer a { color: rgba(236, 236, 234, .84); }
.site-footer .footer-nap p:first-of-type strong { color: #FFFFFF; }
.site-footer a:hover { color: #FFFFFF; }
.footer-help, .footer-legal { color: rgba(236, 236, 234, .62); }
.footer-help { border-top-color: rgba(236, 236, 234, .16); }
.footer-help strong { color: #FFFFFF; }

/* --- Numer telefonu bez podkreslenia -------------------------------------- */
.section--dark .fact a,
.fact a,
.footer-nap a[href^="tel:"] { text-decoration: none; }
.section--dark .fact a:hover,
.fact a:hover { text-decoration: none; }
.section--dark .fact a { color: #F0C6A8; }
.section--dark .fact a:hover { color: #FFFFFF; }

/* --- Zblendowane pasy jasne: „Cennik i zasady" + „Najczestsze pytania" -----
   Byly to dwa plaskie pola (papier / tint) stykajace sie twarda krawedzia.
   Teraz jeden ciagly przeplyw: cennik schodzi z papieru w tint, FAQ wraca
   z tintu w papier - granica miedzy nimi znika, a rytm zostaje. */
main > .section.pricing {
  background: linear-gradient(180deg,
    #FAF6EF 0%, #F6F1E7 46%, var(--color-band) 100%);
}
main > .section.faq {
  background: linear-gradient(180deg,
    var(--color-band) 0%, #F5F0E6 58%, #FAF6EF 100%);
}
/* pas ciemny zaraz po FAQ - miekkie wejscie zamiast ciecia */
main > .section.contact.section--dark {
  background:
    linear-gradient(180deg, rgba(34, 64, 95, .92) 0%, var(--color-ink-blue) 12%,
                    var(--color-ink-blue-700) 100%);
}

/* =============================================================================
   RUNDA 11 - RESET PALETY (dyrektor: „popraw kolory, zeby dobrze wygladalo dla oka")

   DIAGNOZA (co realnie nie grało):
   1. Dwa akcenty walczyly o te sama role: terakota (ciepla) i atramentowy blekit
      (chlodny) na ciepłym papierze. Blekit na kremie zawsze wyglada „doklejony" -
      to kolory z przeciwnych stron kola, bez niczego, co by je laczylo.
   2. TRZY rozne ciemne strefy w trzech kolorach: granatowy pasek menu, granatowe
      sekcje, czarna stopka. Oko czyta to jako trzy niezalezne systemy, nie jeden.
   3. Wszystkie jasne pasy mialy niemal identyczna jasnosc (papier 96%, tint 94%),
      wiec gora strony byla bezowa breja, a potem nagle spadala w ciezka ciemnosc.

   ROZWIAZANIE - jeden system, cztery role, zasada 60/30/10:
   * 60%  PAPIER  #FAF7F1  - domyslne tlo tresci
   * 25%  PLYTA   #ECE7DC  - jedyny jasny tint (wyrazniej odsuniety od papieru)
   *  ~   GLEBIA  #1E3A33  - JEDEN ciemny kolor na pasek menu, ciemne sekcje i stopke
                             (butelkowa zielen: krewna szalwii, wiec harmonizuje
                             z ciepłym tlem, a jest dosc glęboka, by dac kontrast)
   * 10%  AKCENT  #A94E2B  - terakota WYLACZNIE na akcje i drobne znaczniki

   Blekit znika calkowicie. „Drugi kolor" nadal jest - to glebia butelkowej zieleni,
   tylko z tej samej rodziny co reszta, wiec nie klóci sie z terakota.
   ============================================================================= */

:root {
  --color-bg: #FAF7F1;
  --color-band: #ECE7DC;
  --color-surface: #F4F0E7;
  --color-hairline: #CFC4B0;
  --color-border: #DCD2BF;

  --color-deep: #1E3A33;          /* jedyny ciemny kolor strony */
  --color-deep-700: #162C27;
  --color-deep-900: #101F1B;      /* stopka - o ton glebiej, wiec czyta sie jako fundament */
  --color-deep-100: #E4EAE5;

  --color-accent: #A94E2B;
  --color-accentHover: #8E3F21;
  --color-accentText: #FFFFFF;
  --color-accent-soft: #E9A47F;   /* terakota rozjasniona - do uzycia NA ciemnym */

  --color-primary: var(--color-deep);
  --color-primary600: var(--color-deep-700);

  --text-strong: #17211E;
  --text-body: #38433F;
  --text-muted: #69736E;

  /* blekit wycofany - aliasy zostawione, zeby stare reguly nie wywalily koloru */
  --color-ink-blue: var(--color-deep);
  --color-ink-blue-700: var(--color-deep-700);
  --color-ink-blue-100: var(--color-deep-100);
}

body { background-color: var(--color-bg); }

/* --- PASEK MENU: glebia ---------------------------------------------------- */
.site-header { background: var(--color-deep); border-bottom-color: rgba(244, 240, 231, .14); }
.site-header .brand, .site-header .brand-name { color: #F6F3EC; }
.site-header .brand small, .site-header .brand .brand-tagline { color: rgba(244, 240, 231, .58); }
nav[aria-label="Główna"] a:not(.btn) { color: rgba(244, 240, 231, .86); }
nav[aria-label="Główna"] a:not(.btn):hover { color: #FFFFFF; }
nav[aria-label="Główna"] a:not(.btn)::after { background: var(--color-accent-soft); }
.nav-toggle { border-color: rgba(244, 240, 231, .32); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #F6F3EC; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
@media (max-width: 767px) { nav[aria-label="Główna"] { background: var(--color-deep); } }
.site-header.nav-collapsed nav[aria-label="Główna"] { background: var(--color-deep); }

/* --- JASNE PASY: wieksza roznica jasnosci --------------------------------- */
.section--sage, .section--cream { background: var(--color-band); }
main > .section.pricing {
  background: linear-gradient(180deg, var(--color-bg) 0%, #F4EFE5 48%, var(--color-band) 100%);
}
main > .section.faq {
  background: linear-gradient(180deg, var(--color-band) 0%, #F3EEE4 56%, var(--color-bg) 100%);
}
.section--texture { background: var(--color-band); }
.section--texture__weave {
  background-image:
    repeating-linear-gradient(45deg,  rgba(30, 58, 51, .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(120, 96, 66, .045) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%);
}
.section--photo__scrim { background: rgba(250, 247, 241, .84); }
.section--photo.process .section--photo__scrim { background: rgba(250, 247, 241, .90); }
.hero-bg__scrim {
  background:
    linear-gradient(100deg,
      rgba(250, 247, 241, .96) 0%, rgba(250, 247, 241, .90) 30%,
      rgba(250, 247, 241, .58) 54%, rgba(250, 247, 241, .18) 76%,
      rgba(250, 247, 241, .06) 100%),
    linear-gradient(180deg, rgba(250, 247, 241, .50) 0%, rgba(250, 247, 241, 0) 32%);
}
@media (max-width: 860px) {
  .hero-bg__scrim {
    background: linear-gradient(180deg, rgba(250, 247, 241, .97) 0%, rgba(250, 247, 241, .93) 46%,
      rgba(250, 247, 241, .74) 68%, rgba(250, 247, 241, .34) 100%);
  }
}

/* --- KAFLE na jasnym ------------------------------------------------------ */
.tile, .card-grid > .card, .faq-item, .panel, .hours, .contact-form {
  background: #FFFDF8; border-color: rgba(207, 196, 176, .62);
}
.tile:hover, .card-grid > .card:hover { border-color: rgba(169, 78, 43, .34); }
.tile:hover::before {
  background: radial-gradient(120% 80% at 50% -20%, rgba(169, 78, 43, .08), transparent 62%);
}
.tile__icon, .card-grid > .card .card__icon {
  background: linear-gradient(150deg, var(--color-deep-100), rgba(228, 234, 229, .55));
  border-color: rgba(30, 58, 51, .22); color: var(--color-deep);
}
.tile__num, .tile--step .tile__num { color: rgba(30, 58, 51, .14); }
.tile--noicon::after { background: var(--color-accent); opacity: .6; }
.tile--noicon:hover::after { opacity: 1; }
.eyebrow { color: var(--color-deep); }
.eyebrow::after, .eyebrow--center::before { background: rgba(30, 58, 51, .32); }

/* --- CIEMNE SEKCJE: ten sam kolor co pasek menu --------------------------- */
.section--dark,
main > .section.contact.section--dark {
  background: linear-gradient(180deg, var(--color-deep) 0%, var(--color-deep-700) 100%);
  color: rgba(244, 240, 231, .90);
}
.section--dark h2, .section--dark h3, .section--dark strong { color: #F8F5EE; }
.section--dark p, .section--dark .lead { color: rgba(244, 240, 231, .80); }
.section--dark .eyebrow { color: rgba(244, 240, 231, .60); }
.section--dark .eyebrow::after, .section--dark .eyebrow--center::before {
  background: rgba(244, 240, 231, .30); }
.section--dark .tile, .section--dark .fact.tile, .section--dark .card, .section--dark .hours {
  background: rgba(255, 253, 248, .06); border-color: rgba(244, 240, 231, .18); }
.section--dark .tile:hover, .section--dark .fact.tile:hover {
  background: rgba(255, 253, 248, .11); border-color: rgba(233, 164, 127, .45);
  box-shadow: 0 18px 40px rgba(8, 20, 17, .35); }
.section--dark .tile__icon { background: rgba(255, 253, 248, .10);
  border-color: rgba(244, 240, 231, .24); color: #F1EEE6; }
.section--dark .tile__num { color: rgba(244, 240, 231, .14); }
.section--dark .tile--noicon::after { background: var(--color-accent-soft); opacity: .9; }
.section--dark .fact a { color: var(--color-accent-soft); }
.section--dark .fact a:hover { color: #FFFFFF; }
.section--dark .fact svg { color: var(--color-accent-soft); }
.section--dark .hours-title { color: rgba(244, 240, 231, .60); }
.section--dark .hours__row { border-top-color: rgba(244, 240, 231, .20);
  color: rgba(244, 240, 231, .84); }
.section--dark .hours__row span:last-child { color: #F8F5EE; }
.section--dark .btn-ghost { border-color: rgba(244, 240, 231, .42); color: #F8F5EE; }
.section--dark .btn-ghost:hover { background: #F8F5EE; color: var(--color-deep);
  border-color: #F8F5EE; }

/* --- STOPKA: ta sama rodzina, o ton glebiej ------------------------------- */
.site-footer {
  background: var(--color-deep-900);
  border-top: 1px solid rgba(244, 240, 231, .12);
  color: rgba(240, 237, 229, .80);
}
.site-footer h3 { color: rgba(240, 237, 229, .46); }
.site-footer p, .site-footer a { color: rgba(240, 237, 229, .84); }
.site-footer .footer-nap p:first-of-type strong { color: #FFFFFF; }
.site-footer a:hover { color: var(--color-accent-soft); }
.footer-help, .footer-legal { color: rgba(240, 237, 229, .60); }
.footer-help { border-top-color: rgba(240, 237, 229, .16); }
.footer-help strong { color: #FFFFFF; }

/* --- AKCENT: tylko akcje i drobne znaczniki ------------------------------- */
.btn-primary { background: linear-gradient(150deg, #BB5730, var(--color-accent));
  box-shadow: 0 2px 6px rgba(169, 78, 43, .22); }
.btn-primary:hover { background: linear-gradient(150deg, var(--color-accent), var(--color-accentHover));
  box-shadow: 0 10px 24px rgba(169, 78, 43, .30); }
.btn-ghost { border-color: rgba(30, 58, 51, .34); background: rgba(255, 253, 248, .6); }
.btn-ghost:hover { background: var(--color-deep); color: #F8F5EE; border-color: var(--color-deep); }
.price-row__val { background: rgba(169, 78, 43, .09); border-color: rgba(169, 78, 43, .22);
  color: var(--color-accent); }
.price-row:hover { background: rgba(30, 58, 51, .035); }
.faq-item > summary::after { background-color: rgba(169, 78, 43, .09);
  border-color: rgba(169, 78, 43, .22);
  background-image: linear-gradient(var(--color-accent), var(--color-accent)),
                    linear-gradient(var(--color-accent), var(--color-accent)); }
.faq-item:hover, .faq-item[open] { border-color: rgba(169, 78, 43, .34); }
.step__time { color: var(--color-accent); }
:where(a, button, input, textarea, select):focus-visible { outline-color: var(--color-deep); }
::selection { background: rgba(169, 78, 43, .18); }
.contact-form .field input:focus { border-color: var(--color-deep);
  box-shadow: 0 0 0 3px rgba(30, 58, 51, .14); }
.map-embed iframe { filter: saturate(.7) contrast(1.02); }

/* =============================================================================
   RUNDA 12 - ciemny kolor: butelkowa zielen -> GLEBOKIE ESPRESSO
   (dyrektor: „zmien ten zielony na inny")

   Wybor nie jest przypadkowy: ciemny kolor ma byc w TEJ SAMEJ temperaturze co
   akcent i papier. Espresso #2C231D to po prostu terakota sprowadzona do bardzo
   niskiej jasnosci - dlatego pasek menu, ciemne sekcje i stopka czytaja sie jako
   cien tej samej marki, a nie jako drugi, obcy kolor. Zielen byla poprawna
   technicznie, ale wnosila trzecia rodzine barw obok terakoty i papieru.
   ============================================================================= */
:root {
  --color-deep: #2C231D;
  --color-deep-700: #221B16;
  --color-deep-900: #1A1511;      /* stopka - fundament */
  --color-deep-100: #EFE7DC;      /* jasny tint marki: plakietki ikon, obwodki */
  --color-accent-soft: #EFB187;   /* terakota rozjasniona - czytelna na espresso */

  --color-primary: var(--color-deep);
  --color-primary600: var(--color-deep-700);
  --color-ink-blue: var(--color-deep);
  --color-ink-blue-700: var(--color-deep-700);
  --color-ink-blue-100: var(--color-deep-100);
}

/* dopasowanie pochodnych, ktore mialy wpisany odcien zieleni */
.eyebrow::after, .eyebrow--center::before { background: rgba(44, 35, 29, .30); }
.tile__num, .tile--step .tile__num { color: rgba(44, 35, 29, .13); }
.tile__icon, .card-grid > .card .card__icon {
  background: linear-gradient(150deg, var(--color-deep-100), rgba(239, 231, 220, .55));
  border-color: rgba(44, 35, 29, .20); color: var(--color-deep); }
.btn-ghost { border-color: rgba(44, 35, 29, .32); }
.price-row:hover { background: rgba(44, 35, 29, .035); }
.contact-form .field input:focus { box-shadow: 0 0 0 3px rgba(44, 35, 29, .13); }
.section--texture__weave {
  background-image:
    repeating-linear-gradient(45deg,  rgba(44, 35, 29, .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(120, 96, 66, .045) 0 1px, transparent 1px 7px),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%);
}
.section--dark .tile:hover, .section--dark .fact.tile:hover {
  border-color: rgba(239, 177, 135, .45);
  box-shadow: 0 18px 40px rgba(20, 14, 10, .38); }

/* --- Stopka: blok kryzysowy i nota prawna jako TRZECIA kolumna po prawej --- */
.footer-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .6fr) minmax(0, 1.3fr);
    gap: clamp(32px, 4vw, 72px); }
}
.footer-side { display: grid; align-content: start; gap: var(--space-5); }
.footer-side .footer-help { margin-top: 0; padding-top: 0; border-top: 0;
  padding-left: var(--space-5); border-left: 2px solid rgba(239, 177, 135, .55);
  max-width: none; }
.footer-side .footer-help p { font-size: 14px; line-height: 1.62; }
.footer-side .footer-legal { margin-top: 0; padding-left: var(--space-5); }
@media (max-width: 899px) {
  .footer-side { margin-top: var(--space-6); padding-top: var(--space-6);
    border-top: 1px solid rgba(240, 237, 229, .16); }
}