/* ==========================================================================
   Klinika MS: komponenty układu
   Warstwa trzecia, po tokens.css i base.css. Tu mieszkają nagłówek, hero,
   sekcje, listy i szablony podstron.
   ========================================================================== */

/* ------------------------------------------------------------ Dostępność */

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 500; background: var(--c-ink); color: var(--c-on-dark);
  padding: 12px 22px; border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: var(--fw-medium); transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--c-on-dark); }

/* Znacznik braku danych. Widoczny, żeby nie przeoczyć luki przed startem. */
.do-uzupelnienia {
  color: var(--c-warning);
  font-size: var(--fs-small);
  font-style: italic;
}
.do-uzupelnienia::before { content: "Do uzupełnienia: "; font-style: normal; font-weight: var(--fw-medium); }
.do-uzupelnienia { font-size: var(--fs-small); }

/* --------------------------------------------------------------- Nagłówek */

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--header-h);
}
.logo { display: block; flex-shrink: 0; }
/* Ponizej ok. 110px napis CENTRUM przestaje byc czytelny.
   Brandbook podaje odpowiednik 33 mm w druku. */
.logo img { width: 84px; height: auto; display: block; }
@media (max-width: 620px) { .logo img { width: 76px; } }
/* Srodek znaku w linii napisow nawigacji */
.site-header__inner { align-items: center; }

.nav__list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .9375rem; font-weight: var(--fw-medium); color: var(--c-ink);
  padding-block: 10px;
}
.nav__item > a:hover,
.nav__item > a[aria-current] { color: var(--c-brand-dark); }
.nav__strzalka { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); }
.nav__item--ma-podmenu:hover .nav__strzalka { transform: rotate(180deg); }

.podmenu {
  position: absolute; top: 100%; left: -18px; min-width: 288px;
  background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--sh-card); border: 1px solid var(--c-border);
  list-style: none; margin: 0; padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              visibility var(--t-base);
  z-index: var(--z-dropdown);
}
.nav__item--ma-podmenu:hover .podmenu,
.nav__item--ma-podmenu:focus-within .podmenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.podmenu a {
  display: block; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: .9375rem; color: var(--c-text);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.podmenu a:hover { background: var(--c-surface-alt); color: var(--c-brand-dark); }

.site-header__akcje { display: flex; align-items: center; gap: var(--sp-4); }
.site-header__tel {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: .9375rem; color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.site-header__tel:hover { color: var(--c-brand-dark); }

.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .nav, .site-header__tel { display: none; }
}

/* -------------------------------------------------------------- Okruszki */

.okruszki { margin-bottom: var(--sp-4); }
.okruszki ol {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-small);
}
.okruszki li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.okruszki a { color: inherit; opacity: .85; display: inline-block; padding-block: 3px; }
.okruszki a:hover { opacity: 1; }
.okruszki [aria-current] { font-weight: var(--fw-medium); }

/* ------------------------------------------------------------------ Hero */

/* Hero strony glownej jest JASNE (wariant .hero--klinika nizej). Reguly
   ciemnego wariantu, ktory tu kiedys stal, zostaly usuniete: .hero p
   ustawialo kolor tekstu na --c-on-dark-muted i miala wyzsza specyficznosc
   niz .hero__lead (0,1,1 wobec 0,1,0), wiec akapit hero mial na bieli
   1,55:1 niezaleznie od kolejnosci regul. Razem z nia poszly martwe
   .hero::after, .hero__karta i .godziny, bo karty godzin nie ma w hero
   od czasu przebudowy. */

.hero { position: relative; overflow: hidden; }

.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-12);
  align-items: center; position: relative; z-index: 1;
}
.hero__akcje { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* Nadtytul na ciemnym tle, uzywany na hero podstron */
.eyebrow--light { color: var(--c-roz-na-ciemnym); }

/* Wyroznienie w naglowku na ciemnym tle: jasny akcent zamiast --c-brand,
   ktory na granacie mial 2,06:1 */

/* Dlugie polskie zlozenia (endokrynologiczny, psychodietetyczny) przy rozmiarze
   display potrafia przekroczyc szerokosc kontenera. Lamiemy je zamiast przycinac. */
h1, h2, h3, .display { overflow-wrap: break-word; hyphens: auto; }
/* ------------------------------------------------------- Układ z kolumną */

.uklad-z-bokiem {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-12);
  align-items: start;
}
@media (max-width: 1000px) { .uklad-z-bokiem { grid-template-columns: 1fr; gap: var(--sp-8); } }

.bok { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 1000px) { .bok { position: static; } }

.bok__blok {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.bok__blok--cta { background: var(--c-surface-alt); border-color: var(--c-border-strong); }
.bok__naglowek {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-muted); margin-bottom: var(--sp-4); font-family: var(--font-body);
  font-weight: var(--fw-semibold);
}
.bok__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bok__lista a { font-size: .9375rem; font-weight: var(--fw-medium); }
.bok__lista--pakiety li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.bok__lista--pakiety span { font-variant-numeric: tabular-nums; color: var(--c-muted); font-size: .875rem; }

.bok__osoba {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--c-text);
}
.bok__osoba + .bok__osoba { border-top: 1px solid var(--c-border); }
.bok__osoba b { display: block; font-family: var(--font-heading); font-size: .9375rem; color: var(--c-ink); }
.bok__osoba small { color: var(--c-muted); font-size: .8125rem; }
.bok__osoba:hover b { color: var(--c-brand-dark); }
.bok__inicjaly {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--c-surface-alt);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: .875rem; color: var(--c-brand-dark);
}
.bok__tel {
  display: block; font-family: var(--font-heading); font-size: var(--fs-h5);
  font-weight: var(--fw-semibold); color: var(--c-ink); margin-bottom: var(--sp-4);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Proza */

.proza { max-width: 72ch; }
.proza--waska { max-width: 62ch; margin-inline: auto; }
.proza h2 { font-size: var(--fs-h3); margin-top: var(--sp-10); }
.proza h2:first-child { margin-top: 0; }
.proza h3 { font-size: var(--fs-h5); margin-top: var(--sp-8); }
.proza ul, .proza ol { padding-left: 1.35em; margin-bottom: var(--sp-4); }
.proza li { margin-bottom: 10px; }
.proza li::marker { color: var(--c-brand); }
.proza table {
  width: 100%; border-collapse: collapse; margin-bottom: var(--sp-6); font-size: .9375rem;
}
.proza thead th {
  text-align: left; font-family: var(--font-heading); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted);
  padding: 10px 14px; border-bottom: 2px solid var(--c-border-strong);
}
.proza td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.proza blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6);
  background: var(--c-surface-alt); border-radius: var(--r-md);
  border-left: 4px solid var(--c-brand); font-size: 1.0625rem; color: var(--c-ink);
}
.proza blockquote p:last-child { margin-bottom: 0; }

/* Tabela w prozie na wąskim ekranie przewija się we własnym kontenerze */
.tabela-przewijana { overflow-x: auto; margin-bottom: var(--sp-6); }

/* ------------------------------------------------------- Ostrzeżenie i FAQ */

.ostrzezenie {
  margin-top: var(--sp-10); padding: var(--sp-6);
  background: #FFF8EE; border: 1px solid #F0DDBC; border-radius: var(--r-lg);
}
.ostrzezenie h2 { margin-top: 0; font-size: var(--fs-h5); color: #8A5A00; }
.ostrzezenie ul { margin-bottom: var(--sp-4); }
.ostrzezenie li::marker { color: var(--c-warning); }
.ostrzezenie__nota { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: 0; }

/* Pigulka nad naglowkiem sekcji, jak "Our Story" / "FAQs" w szablonie */
.pigulka {
  display: inline-block; margin-bottom: var(--sp-4); padding: 8px 18px;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-surface);
  font-family: var(--font-heading); font-size: .8125rem; font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-roz-tekst);
}
.pigulka--na-ciemnym {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28);
  color: var(--c-on-dark);
}

/* ---------------------------------------------------------------- FAQ */
/* Odwzorowanie sekcji FAQ z szablonu dentystycznego Webflow: pigulka nad
   naglowkiem, wysrodkowany H2, zakladki kategorii (aktywna wypelniona) i biala
   karta z akordeonem. Wiersz akordeonu: kolko z plusem po lewej, pytanie
   pogrubione, cienka linia miedzy wierszami. Sekcja lezy na piaskowym tle,
   zeby karta odcinala sie jak w szablonie. */
.faq { background: var(--c-surface-alt); padding-block: var(--section-py); scroll-margin-top: var(--header-h); }
.faq__naglowek { max-width: 680px; margin: 0 auto var(--sp-8); text-align: center; }
.faq__naglowek h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(2rem, 1.35rem + 2.4vw, var(--fs-h2));
  max-width: none;
}
.faq__lead { max-width: 58ch; margin: 0 auto; color: var(--c-text); }

.faq__zakladki {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: var(--sp-8);
}
.faq__zakladka {
  padding: 12px 26px; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-ink); cursor: pointer;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: var(--fw-semibold);
  line-height: 1.2;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.faq__zakladka:hover { border-color: var(--c-brand); color: var(--c-brand); }
.faq__zakladka[aria-selected="true"] {
  background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-dark);
  box-shadow: var(--sh-brand);
}
.faq__zakladka:focus-visible { outline: 3px solid var(--c-brand-dark); outline-offset: 3px; }

.faq__karta {
  max-width: 840px; margin-inline: auto; padding: 8px 40px;
  background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--sh-card);
}
.faq__panel:focus-visible { outline: 3px solid var(--c-brand-dark); outline-offset: 6px; border-radius: var(--r-sm); }

.faq__pozycja { border-bottom: 1px solid var(--c-border); }
.faq__pozycja:last-child { border-bottom: 0; }
.faq__pytanie {
  display: flex; align-items: center; gap: 18px; padding: 24px 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-semibold);
  line-height: 1.3; color: var(--c-ink);
  transition: color var(--t-base) var(--ease);
}
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie::marker { content: ""; }
.faq__pytanie:hover { color: var(--c-brand); }
.faq__pytanie:focus-visible { outline: 3px solid var(--c-brand-dark); outline-offset: 4px; border-radius: var(--r-sm); }
.faq__ikona {
  position: relative; flex: 0 0 auto; width: 36px; height: 36px;
  border-radius: var(--r-full); background: var(--c-roz-jasny);
  transition: background var(--t-base) var(--ease);
}
.faq__ikona::before, .faq__ikona::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--c-brand); border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq__ikona::before { width: 14px; height: 2px; }
.faq__ikona::after { width: 2px; height: 14px; transition: transform var(--t-base) var(--ease); }
.faq__pozycja[open] .faq__ikona { background: var(--c-brand); }
.faq__pozycja[open] .faq__ikona::before,
.faq__pozycja[open] .faq__ikona::after { background: var(--c-on-dark); }
/* Pionowa kreska obraca sie w poziom: plus zamienia sie w minus */
.faq__pozycja[open] .faq__ikona::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__odpowiedz { padding: 0 0 26px 54px; color: var(--c-text); line-height: var(--lh-prose); }
.faq__odpowiedz p { margin: 0; max-width: none; }
.faq__odpowiedz a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.faq__odpowiedz a:hover { color: var(--c-brand-dark); }
.faq__pozycja[open] .faq__odpowiedz { animation: faq-wejscie .35s var(--ease); }
@keyframes faq-wejscie {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__pozycja[open] .faq__odpowiedz { animation: none; }
}

/* Blok autora pod pytaniami: na stronach uslug lezy pod karta FAQ */
.faq__autorstwo {
  max-width: 840px; margin: var(--sp-6) auto 0; padding: 0 8px;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  font-size: var(--fs-small); color: var(--c-muted);
}
.faq__autorstwo p { margin: 0; max-width: none; }
.faq__autorstwo b { color: var(--c-text); font-weight: var(--fw-medium); }

@media (max-width: 700px) {
  .faq { padding-block: var(--section-py-mobile); }
  .faq__naglowek { margin-bottom: var(--sp-6); }
  .faq__zakladki { gap: 8px; margin-bottom: var(--sp-6); }
  .faq__zakladka { padding: 10px 18px; font-size: .875rem; }
  .faq__karta { padding: 4px 20px; border-radius: var(--r-md); }
  .faq__pytanie { gap: 14px; padding: 18px 0; font-size: 1.0625rem; }
  .faq__ikona { width: 30px; height: 30px; }
  .faq__ikona::before { width: 12px; }
  .faq__ikona::after { height: 12px; }
  .faq__odpowiedz { padding: 0 0 20px 44px; }
}

.autorstwo {
  margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--c-border);
  font-size: var(--fs-small); color: var(--c-muted);
}
.autorstwo p { margin-bottom: 6px; max-width: none; }
.autorstwo b { color: var(--c-text); font-weight: var(--fw-medium); }

/* --------------------------------------------------------------- Sekcje */

.naglowek-sekcji { max-width: 640px; margin-bottom: var(--sp-10); }
.naglowek-sekcji p { margin-bottom: 0; }
.naglowek-sekcji--srodek { margin-inline: auto; text-align: center; }
.naglowek-sekcji--srodek p { margin-inline: auto; }

.karta__link { display: inline-block; margin-top: var(--sp-4); font-size: .875rem;
  font-weight: var(--fw-medium); color: var(--c-brand-dark); }
.karta__link::after { content: " \2192"; }

/* Karta osoby bywa nagłówkiem h2 (wykaz specjalistów) albo h3 (strona główna).
   Styl jest ten sam, poziom zależy od hierarchii dokumentu. */
.person__body h2,
.person__body h3 {
  font-family: var(--font-heading); font-size: var(--fs-h6); line-height: 1.4;
  color: var(--c-ink); margin-bottom: 6px;
}
.person a { color: inherit; display: block; }
.person:hover .person__body h2,
.person:hover .person__body h3 { color: var(--c-brand-dark); }

/* Nagłówek karty usługi jest linkiem, ale ma dziedziczyć kolor tytułu */
.card h3 a { color: inherit; }
.card:hover h3 a { color: var(--c-brand-dark); }

/* ==========================================================================
   Karta CTA i stopka
   Układ wzorowany na szablonie wskazanym przez klienta: karta zawieszona
   na granicy jasnej treści i ciemnej stopki, pod nią cztery kolumny.
   ========================================================================== */

/* Pas rozdzielony w pionie. Górna połowa w kolorze treści, dolna w kolorze
   stopki. Karta leży w środku, więc krawędź przechodzi przez jej połowę.
   Bez pozycjonowania absolutnego, więc wyższa karta na mobile przesuwa
   podział razem ze sobą. */
.cta-pas {
  background: linear-gradient(
    to bottom,
    var(--c-bg) 0 50%,
    var(--c-footer) 50% 100%
  );
}

.cta-karta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-10);
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: var(--sp-10);
  align-items: center;

  /* Jasna karta w ciepłym akcencie ze zdjęć sesyjnych. Granat ma na niej
     od 8,55:1 na najciemniejszym końcu do 10,88:1 na najjaśniejszym,
     tekst akapitowy --c-text od 4,81:1. Kolorów --c-muted i --c-roz-tekst
     tu nie używamy: na ciemnym końcu schodzą do 3,85:1 i 3,71:1. */
  background: linear-gradient(122deg, #FCF5F5 0%, #F5E5E6 58%, #EDD7DA 100%);
  color: var(--c-text);
  box-shadow: 0 24px 60px rgba(110, 51, 80, .22);
}

/* Okrąg w rogu: jedyna dekoracja karty, krzyżyki z szablonu usunięte. */
.cta-karta::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -150px;
  width: 380px;
  height: 380px;
  border-radius: var(--r-full);
  border: 1px solid rgba(110, 51, 80, .20);
  pointer-events: none;
}

.cta-karta > * { position: relative; z-index: 1; }

.cta-karta h2 {
  color: var(--c-brand);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
  max-width: 18ch;
  text-wrap: balance;
}
.cta-karta p {
  color: var(--c-text);
  margin-bottom: 0;
  max-width: 46ch;
}

.cta-karta__akcja {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}

.cta-karta__tel {
  display: grid;
  gap: 2px;
  color: var(--c-brand);
  background: rgba(255, 255, 255, .60);
  border: 1px solid rgba(110, 51, 80, .32);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  transition: background var(--t-base) var(--ease);
}
.cta-karta__tel:hover { background: var(--c-surface); color: var(--c-brand-dark); }
.cta-karta__tel span {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-text);
}
.cta-karta__tel b {
  font-family: var(--font-heading); font-size: var(--fs-h5);
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}

/* Wariant przycisku na kartę: ciemny na jasnym akcencie, jak w szablonie */
.btn--ciemny {
  background: var(--c-footer);
  border-color: var(--c-footer);
  color: var(--c-on-dark);
}
.btn--ciemny:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-dark);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

@media (max-width: 900px) {
  .cta-karta {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: var(--sp-8) var(--sp-6);
  }
  .cta-karta__akcja { justify-items: stretch; }
  .cta-karta__tel { text-align: center; }
}

/* ---------------------------------------------------------------- Stopka */

.site-footer {
  background: var(--c-footer);
  color: var(--c-on-dark-muted);
  padding-block: var(--sp-16) var(--sp-8);
}

.site-footer__gora {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--sp-10) var(--sp-8);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
@media (max-width: 1000px) { .site-footer__gora { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .site-footer__gora { grid-template-columns: 1fr; } }

.site-footer__logo { width: 150px; height: auto; margin-bottom: var(--sp-5); }
.site-footer p { font-size: .9375rem; max-width: 40ch; }
.site-footer a { color: var(--c-on-dark-muted); }
.site-footer a:hover { color: var(--c-brand-light); }

.site-footer__naglowek {
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  color: var(--c-on-dark);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-5);
}
.site-footer__naglowek--drugi { margin-top: var(--sp-8); }

.site-footer__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; font-size: .9375rem;
}

/* Podkreślenie rosnące od lewej, zamiast zmiany koloru na zbyt ciemny */
.site-footer__kolumna .site-footer__lista a {
  position: relative;
  display: inline-block;
  /* Cel dotykowy: same wiersze mialy 26 px wysokosci, prog WCAG 2.5.8 to 24 px.
     Odstep pionowy powieksza pole klikniecia bez ruszania rytmu tekstu. */
  padding-block: 4px;
}
.site-footer__kolumna .site-footer__lista a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: var(--c-brand-light);
  transition: width var(--t-base) var(--ease);
}
.site-footer__kolumna .site-footer__lista a:hover::after { width: 100%; }

.site-footer__kontakt li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
}
.site-footer__kontakt .ikonka {
  width: 18px; height: 18px; color: var(--c-brand); margin-top: 3px;
}
.site-footer__kontakt a { font-variant-numeric: tabular-nums; }

.site-footer__godziny li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: .875rem;
}
.site-footer__godziny b {
  color: var(--c-on-dark); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.social { display: flex; gap: 10px; list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-sm);
  color: var(--c-on-dark-muted);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.social a:hover {
  background: var(--c-brand); border-color: var(--c-brand); color: var(--c-footer);
}
.social svg { width: 17px; height: 17px; fill: currentColor; }

.site-footer__dol { padding-top: var(--sp-6); font-size: var(--fs-small); }
.site-footer__dol p { margin-bottom: 6px; max-width: none; }
.site-footer__nota { color: rgba(214, 197, 203, .78); max-width: 78ch; }

/* Znacznik braku danych na ciemnym tle stopki: 9,2:1 wobec --c-footer */
.do-uzupelnienia--na-ciemnym { color: #F0B460; }

/* Na karcie CTA ten sam pomarańcz dawałby 1,56:1, więc tam znacznik jest
   biały. Prefiks "Do uzupełnienia:" i tak go wyróżnia. */
/* Znacznik braku danych na jasnej karcie: --c-warning miałby tu 3,12:1
   na najciemniejszym końcu tła, ten wariant ma 4,83:1. */
.cta-karta .do-uzupelnienia { color: #8A4E05; }

/* ------------------------------------------------------ Obraz szeroki w prozie */

.obraz-szeroki img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

.obraz-szeroki { margin: 0 0 var(--sp-8); }
.obraz-szeroki figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ---------------------------------------------------------- Menu mobilne */

/* Do tej pory .menu-toggle mial display:none bez zadnego przelacznika,
   wiec ponizej 1080px serwis nie mial zadnej nawigacji. */

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--c-ink);
}

.menu-toggle__kreska,
.menu-toggle__kreska::before,
.menu-toggle__kreska::after {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.menu-toggle__kreska { position: relative; }
.menu-toggle__kreska::before,
.menu-toggle__kreska::after { content: ""; position: absolute; left: 0; }
.menu-toggle__kreska::before { top: -6px; }
.menu-toggle__kreska::after { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__kreska { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__kreska::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__kreska::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu-toggle { display: inline-flex; }

  /* Panel rozwijany pod paskiem naglowka */
  .nav {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--sh-card);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--t-base) var(--ease), visibility var(--t-base);
  }
  .site-header { position: sticky; }
  .site-header__inner { position: relative; }

  .nav.jest-otwarte {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    gap: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-5);
  }
  .nav__item { border-bottom: 1px solid var(--c-border); }
  .nav__item:last-child { border-bottom: 0; }
  .nav__item > a { display: flex; justify-content: space-between; padding: 14px 0; font-size: 1rem; }

  /* Podmenu rozwijane klikiem, nie najechaniem */
  .podmenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: var(--c-surface-alt);
    border-radius: var(--r-sm);
    margin: 0 0 var(--sp-3);
    max-height: 0; overflow: hidden; padding: 0 8px;
    transition: max-height var(--t-base) var(--ease), padding var(--t-base) var(--ease);
  }
  .nav__item--ma-podmenu.jest-otwarte .podmenu {
    max-height: 720px; padding: 8px;
  }
  .nav__item--ma-podmenu.jest-otwarte .nav__strzalka { transform: rotate(180deg); }

  .site-header__akcje .btn { padding: 9px 16px; font-size: .875rem; }
}

@media (max-width: 520px) {
  .site-header__akcje .btn { display: none; }
}

/* ---------------------------------------------- Hero z lukiem i wstegami */

/* Uklad ze wzoru wskazanego przez klienta: tekst po lewej, po prawej zdjecie
   w luku (duze zaokraglenie gory, male dolu), za nim wspolsrodkowe wstegi.
   Zdjecie ma wlasny, ciasny kadr 1.3:1 (krok LUK HERO w skrypcie zdjec),
   w ktorym zespol wypelnia 94% szerokosci; kadr 3:2 uzywany w sekcjach
   pokazywalby postacie male, z duzymi pustymi polami. */

.hero--klinika {
  background: var(--c-bg);
  color: var(--c-text);
  padding-block: var(--sp-12) var(--sp-16);
  overflow: hidden;
}
.hero--klinika::after { display: none; }

.hero--klinika .hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: var(--sp-10);
  align-items: center;
}

.hero--klinika h1 {
  color: var(--c-brand);
  /* Nagłówek ma 51 znaków. Przy --fs-h1 (60px) łamał się w tej kolumnie
     na pięć linii, więc dla tego hero schodzimy do 54px i wychodzą trzy. */
  font-size: clamp(2.25rem, 3.5vw, 3.375rem);
  line-height: 1.12;
  margin-bottom: var(--sp-5);
}
.hero--klinika .hl { color: var(--c-roz-tekst); }
.hero--klinika .eyebrow { color: var(--c-roz-tekst); }
/* Czern palety (--c-ink), nie --c-text: klient chce mocniejszy akapit
   w hero. 19,1:1 na bieli. */
.hero__lead { color: var(--c-ink); font-size: 1.0625rem; max-width: 52ch; }
.hero--klinika .hero__akcje { justify-content: flex-start; margin-top: var(--sp-6); }

/* Tekst musi lezec nad wstegami: na waskim ekranie wizual stoi pod
   trescia, a wstegi wychodza poza jego pole i zachodzily na przyciski. */
.hero--klinika .hero__tresc { position: relative; z-index: 2; }
.hero__wizual { position: relative; z-index: 1; }

/* Kolorowy prostokat w tle sekcji, na wzor panelu z szablonu. Lezy pod
   zdjeciem i wychodzi poza prawa krawedz sekcji, wiec czyta sie jako duzy
   blok koloru, a nie jako ramka. Zaczyna sie za kolumna tekstu: przy oknie
   1280 px tekst konczy sie na 623 px, panel startuje na 56% szerokosci
   sekcji, czyli 708 px. */
.hero__panel {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 18%;
  left: 56%;
  right: calc(50% - 50vw);
  background: #F1DFE1;
  border-radius: 36px 0 0 36px;
  pointer-events: none;
}
.hero__paski { display: none; }

/* Pole wsteg pokrywa sie z kadrem, a same wstegi wychodza poza nie i sa
   przycinane dopiero krawedzia sekcji. max-width znosimy, bo regula
   "img, svg, video" z base.css przycielaby rysunek do szerokosci kadru
   i luki ladowalyby wyzej, niz wynika z ich wspolrzednych. */
.hero__wstegi {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  z-index: 0;
  overflow: visible;
}

/* Dwie wersje trasy linii. Pelna ma lewy ogon 261 jednostek poza kadrem
   i wymaga szerokiego okna; ponizej 1200 px kolumna tekstu jest zbyt blisko
   zdjecia i garb wchodzil na przycisk, wiec zostaje sam odcinek prawy. */
.hero__linia--krotka { display: none; }
@media (max-width: 1200px) {
  .hero__linia--dluga { display: none; }
  .hero__linia--krotka { display: block; }
}

.hero__ksztalt {
  position: relative;
  z-index: 1;
  /* Proporcja kadru, w ktorym postacie sa cale i wysrodkowane, a nad
     glowami zostaje zapas na kopule. Sprawdzone numerycznie: przy tym
     kadrze promien 50%/46% nie scina zadnego piksela postaci. */
  aspect-ratio: 1.2 / 1;
  /* Zaokraglony kwadrat, jak karty w szablonie. Wczesniej kopula:
     50% 50% 16px 16px / 46% 46% 16px 16px. */
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-surface-alt);
  box-shadow: 0 24px 60px rgba(42, 27, 34, .18);
}
.hero__foto {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}

@media (max-width: 900px) {
  /* Dol sekcji: ogon linii schodzi 0,237 wysokosci kadru pod jego krawedz,
     a sekcja ma overflow hidden, wiec bez tego zapasu zawiniecie byloby
     przyciete. Kadr ma 69vw szerokosci i proporcje 1,2, wiec zapas liczymy
     jako 0,237 * 69vw / 1,2, czyli okolo 14vw, plus polowa grubosci linii.
     Gorny prog 145 px, bo przy 900 px potrzeba 140 px. */
  .hero--klinika { padding-block: var(--sp-8) clamp(var(--sp-10), 16vw, 145px); }
  .hero--klinika .hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero--klinika h1 { font-size: var(--fs-h2); }
  /* Luk wysrodkowany, zeby nie siegal krawedzi ekranu */
  /* Wezszy niz kolumna, zeby miedzy kadrem a krawedzia okna zostala szpara
     na paski. Szerokosc liczona samym vw, bez progu w pikselach: paski maja
     stala szerokosc wzgledem kadru, wiec przy stalym kadrze i rosnacym oknie
     przestawalyby dochodzic do krawedzi ekranu. */
  .hero__wizual { max-width: 69vw; margin-inline: auto; }

  /* Wstegi wychodza daleko poza pole zdjecia, a w ukladzie jednokolumnowym
     wizual stoi tuz pod trescia, wiec przecinaly przyciski i akapit.
     Zamiast plywajacych ksztaltow: pelnoszerokosciowy pas w kolorze
     przeplatanych sekcji, na ktorym siedzi luk. Zaczyna sie kawalek
     ponizej gornej krawedzi zdjecia i siega konca sekcji, wiec zdjecie
     ma podstawe, a nic nie wchodzi na tekst. */
  .hero__wstegi { display: none; }

  /* Paski po PRAWEJ stronie zdjecia. Wczesniejsze proby probowaly upchnac
     dekoracje po obu stronach i nie bylo na to miejsca: przy luku
     wysrodkowanym zostawalo po 35 px. Jednostronnie miejsce jest, bo paski
     moga schodzic poza krawedz ekranu, tak jak wstegi na desktopie schodza
     poza kolumne.

     Kazdy pasek to wycinek duzego okregu: elipsa o srodku daleko po lewej,
     z widoczna wylacznie PRAWA krawedzia. Jej najbardziej wysuniety punkt
     wypada tuz obok zdjecia, wiec luk czyta sie jako wstega, a nie ramka. */
  /* Pole linii pokrywa sie z kadrem, tak jak na desktopie, wiec wspolrzedne
     w SVG sa jednostkami kadru. Czesci trasy poza polem sa widoczne, przycina
     je dopiero overflow sekcji. max-width znosimy, bo regula "img, svg, video"
     z base.css przycielaby rysunek do szerokosci kadru. */
  .hero__paski {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
  }

  /* Na telefonie panel desktopowy nie ma gdzie sie zmiescic, wiec ten sam
     kolor idzie jako pasmo na calej szerokosci okna, pod zdjeciem. */
  .hero__panel { display: none; }
  .hero__wizual::before {
    content: "";
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100vw;
    top: 56px; bottom: calc(var(--sp-10) * -1);
    background: #F1DFE1;
    z-index: 0;
  }
  .hero__ksztalt { border-radius: 20px; }
}

/* ------------------------------------------ Sekcja placowki na zdjeciu */

/* Efekt "our care" z Heltro (zdjecie stoi wzgledem okna, tresc zjezdza
   po nim) bez background-attachment: fixed, ktorego iOS nie obsluguje.
   Obraz jest position: fixed na caly ekran, a sekcja ma clip-path: inset(0),
   ktore przycina potomkow fixed do jej pola. Zaden przodek nie moze miec
   transform, filter ani will-change, bo zrobilby z siebie containing block
   dla fixed i efekt by znikl. Wymiary i uklad kart jak w Heltro: sekcja
   100vh, karty 384 px, padding 35/40/40, promien 10 px tylko w lewym
   gornym rogu pierwszej. */

.opieka {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  clip-path: inset(0);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: var(--c-surface-alt);
}
.opieka__tlo { position: fixed; inset: 0; z-index: 0; }
.opieka__obraz {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}

.opieka__uklad {
  position: relative; z-index: 1;
  display: flex; justify-content: flex-end; align-items: flex-end;
  width: 100%;
  padding-inline: var(--gutter);
}
.opieka__karty {
  display: grid;
  grid-template-columns: 384px 384px;
  max-width: 100%;
}
.opieka__karta { padding: 35px 40px 40px; }
.opieka__karta--ciemna {
  background: var(--c-brand); color: var(--c-on-dark);
  border-radius: 10px 0 0 0;
}
.opieka__karta--jasna  { background: var(--c-surface); color: var(--c-text); }

.opieka__tytul { font-size: var(--fs-h6); line-height: 1.4; margin-bottom: var(--sp-5); color: inherit; }
.opieka__karta--jasna .opieka__tytul { color: var(--c-brand); }

.opieka__lista {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-5);
  row-gap: 12px;
  font-size: .9375rem;
}
.opieka__lista dt { font-weight: var(--fw-medium); white-space: nowrap; }
.opieka__lista dt::after { content: " :"; }
.opieka__lista dd { margin: 0; font-variant-numeric: tabular-nums; }
.opieka__karta--ciemna a { color: var(--c-on-dark); }
.opieka__karta--ciemna a:hover { color: var(--c-brand-light); }
.opieka__karta--jasna dt { color: var(--c-brand); }

/* Na telefonie ta sama mechanika. Dwie karty po 384 px sie nie mieszcza,
   wiec ida jedna pod druga, na calej szerokosci, z mniejszym paddingiem. */
@media (max-width: 900px) {
  /* Kadr 2:1 przyciety do pionowego ekranu pokazywalby jedna twarz.
     Na telefonie idzie osobny, prawie kwadratowy kadr z trzema osobami,
     dopasowany do SZEROKOSCI ekranu (contain), ustawiony pod naglowkiem.
     Reszta warstwy jest w kolorze sekcji. */
  /* Na telefonie bez przypinania: zwykly blok ze zdjeciem w naturalnej
     proporcji (kadr z trzema osobami), pod nim karty. */
  .opieka { height: auto; display: block; overflow: visible; clip-path: none; }
  .opieka__tlo { position: static; inset: auto; }
  .opieka__obraz { width: 100%; height: auto; object-fit: initial; }
  .opieka__uklad { padding: 0; }
  .opieka__karty { grid-template-columns: 1fr; width: 100%; }
  .opieka__karta { padding: var(--sp-5) var(--gutter); }
  .opieka__karta--ciemna { border-radius: 10px 10px 0 0; }
  .opieka__lista { row-gap: 8px; font-size: .875rem; }
}

/* ------------------------------------------------------ Blok "Dlaczego my" */

.liczby {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-8) var(--sp-8);
}
.liczba { display: grid; gap: 6px; }
.liczba__wartosc {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: var(--fw-heading);
  line-height: 1;
  color: var(--c-brand);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.liczba__etykieta {
  font-family: var(--font-heading);
  font-size: var(--fs-h6); font-weight: var(--fw-semibold);
  color: var(--c-brand);
}
.liczba__opis { font-size: .9375rem; color: var(--c-muted); }

/* ---------------------------------------------------------------- Praca

   Sekcja odwzorowana z szablonu Heltro (rt-doctor-porfolio). Wymiary wzięte
   z szablonu wprost: siatka 820 na 402 przy kontenerze 1247, czyli 2,04 do 1,
   odstęp 26 px, promień 10 px, zdjęcie w proporcji 820:684, karta ciemna
   z paddingiem 26/36/30 i jasna z 20/36/30, liczba 65 px, rząd czterech
   dziedzin z odstępem 30 px. */

.praca { padding-block: var(--section-py); }

.praca__gora {
  display: grid;
  grid-template-columns: minmax(0, 2.04fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}

.karta-foto {
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-surface-alt);
}
/* Kadr 1,095:1 z odrobina tla dorobionego u gory (scripts/przygotuj-zdjecia.py):
   glowy 9% od gornej krawedzi. Karta jest zwykle wyzsza niz kadr, wiec
   object-fit: cover przycina po kilka procent z bokow (kadr ma na to zapas),
   a kotwica u dolu trzyma kolana w kadrze zamiast dodawac pustki nad glowami. */
.karta-foto__obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 3400 / 3104;
  object-fit: cover;
  object-position: 50% 100%;
  display: block;
}
/* Na wezszych ekranach kolumna z tekstem jest duzo wyzsza niz zdjecie:
   zamiast rozciagac karte i ciac boki, zdjecie trzyma wlasna proporcje */
@media (max-width: 1240px) and (min-width: 901px) {
  .praca__gora { align-items: start; }
}
.praca__kolumna {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Karta ciemna: tekst u góry, podpis u dołu, znak w prawym dolnym rogu */
.karta-slowo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 26px 36px 30px;
  border-radius: 10px;
  background: var(--c-hero);
  color: var(--c-on-dark);
}
.karta-slowo__tekst {
  margin: 0;
  max-width: 19em;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--c-on-dark);
}
.karta-slowo__stopka { display: grid; gap: 13px; }
.karta-slowo__znak { width: 74px; height: auto; }
.karta-slowo__podpis {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5625;
  color: var(--c-on-dark);
}
/* Znak w rogu jest tłem, nie treścią: cienki rysunek na tym samym granacie */
.karta-slowo__ikona {
  position: absolute;
  right: 26px;
  /* Nad wierszem z nazwa, na wysokosci znaku: przy 30 px rysunek wchodzil
     na ostatnie znaki podpisu. */
  bottom: 62px;
  width: 116px;
  color: var(--c-on-dark-accent);
  opacity: .32;
  pointer-events: none;
}
.karta-slowo__ikona svg { width: 100%; height: auto; display: block; }

/* Karta jasna: liczba u góry, opis u dołu */
.karta-liczba {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 20px 36px 30px;
  border-radius: 10px;
  background:
    radial-gradient(340px 240px at 88% 6%, rgba(200, 138, 160, .26), transparent 70%),
    var(--c-surface-alt);
}
.karta-liczba__wartosc {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 4vw, 4.0625rem);
  line-height: 1.15;
  font-weight: var(--fw-heading);
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.karta-liczba__opis {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--c-brand);
}


@media (max-width: 900px) {
  .praca__gora { grid-template-columns: 1fr; }
  .karta-slowo__ikona { width: 92px; }
}

@media (max-width: 620px) {
  /* Przy karcie szerokiej na 335 px tekst 20 px rozciagal ciemna karte
     do 547 px wysokosci. Zmierzone po zmianie: 400 px. */
  .praca__kolumna { gap: 18px; }
  .karta-slowo { padding: 24px 24px 26px; gap: var(--sp-5); }
  .karta-liczba { padding: 20px 24px 26px; gap: var(--sp-4); }
  .karta-slowo__tekst,
  .karta-liczba__opis { font-size: 1.0625rem; line-height: 1.55; }
  .karta-slowo__tekst { max-width: none; }
  .karta-slowo__znak { width: 62px; }
  .karta-slowo__ikona { width: 66px; bottom: 52px; }
}

/* ------------------------------------------------------------- Dziedziny

   Sekcja odwzorowana z szablonu wskazanego przez klienta. Wymiary zdjete
   z jego układu przy oknie 1200 px: kontener 1066, karta 343 (32,2%),
   odstęp między kolumnami 17, karta wysoka na 281, okrągły znak 85 px
   wystający 31 px ponad górną krawędź karty, odstęp między wierszami 70.
   Przeniesione na nasz kontener 1200 px w proporcjach, nie w pikselach. */

.dziedziny { padding-block: var(--section-py); }

.dziedziny__gora {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
/* Miara w rem, nie w ch: ch liczy sie od czcionki tego bloku (16 px),
   nie od naglowka, wiec 34ch dawalo 272 px i tytul lamal sie na cztery
   wiersze zamiast dwoch. */
.naglowek-sekcji--plaski { margin: 0; max-width: 38rem; }

/* Przycisk sekcji: wyższy i w wersalikach, jak w szablonie */
.btn--duzy {
  padding: 20px 34px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .875rem;
}

.dziedziny__siatka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 72px;
}

.dziedzina-karta {
  /* Tło karty: chłodny odcień marki, ten sam pomysł co w szablonie.
     Granat na nim ma 10,1:1. */
  background: #F6EDEA;
  border-radius: 16px;
  padding: 0 30px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Znak wychodzi ponad kartę i ma białą obwódkę, tak jak w szablonie */
.dziedzina-karta__znak {
  --ikona-tlo: var(--c-brand);
  width: 84px;
  height: 84px;
  margin-top: -34px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--c-brand);
  color: var(--c-surface);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 9px var(--c-surface), 0 10px 24px rgba(110, 51, 80, .18);
}
.dziedzina-karta__znak svg { width: 50px; height: 50px; }

.dziedzina-karta__tytul {
  margin: 0 0 var(--sp-3);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--c-brand);
}
.dziedzina-karta__opis {
  margin: 0;
  max-width: 28ch;
  color: var(--c-text);
}
.dziedzina-karta__link {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-brand);
}
/* Podkreślenie odnośnika w ciepłym akcencie, szersze niż sam tekst */
.dziedzina-karta__link::after {
  content: "";
  display: block;
  width: 104px;
  height: 2px;
  margin: 8px auto 0;
  background: var(--c-roz);
}
.dziedzina-karta__link:hover { color: var(--c-roz-tekst); }
.dziedzina-karta__link:hover::after { background: var(--c-roz-tekst); }

@media (max-width: 1000px) {
  /* Naglowek i przycisk obok siebie sciskaly tytul do czterech wierszy */
  .dziedziny__gora { grid-template-columns: 1fr; align-items: start; gap: var(--sp-6); }
  .dziedziny__gora .btn { justify-self: start; }
  .naglowek-sekcji--plaski { max-width: none; }
  .dziedziny__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .dziedziny__siatka { grid-template-columns: 1fr; row-gap: 66px; }
  .naglowek-sekcji--plaski { max-width: none; }
}

/* --------------------------------------------------------------- Zespół

   Karty w układzie ze wskazanego szablonu: zdjęcie z zaokrąglonym rogiem,
   na jego dolną krawędź wchodzi biała plakietka z nazwiskiem i rolą, a przy
   jej prawym końcu okrągły przycisk ze strzałką. Plakietka wystaje 12 px poza
   prawą krawędź zdjęcia, czyli mniej niż połowa odstępu w siatce, więc nie
   dotyka sąsiedniej karty. */

.zespol__siatka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  /* miejsce na plakietkę, która schodzi poniżej zdjęcia */
  padding-bottom: 40px;
}

.osoba__link {
  position: relative;
  display: block;
  color: inherit;
}

.osoba__foto {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-surface-alt);
}
.osoba__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.osoba__link:hover .osoba__foto img { transform: scale(1.04); }

.osoba__plakietka {
  position: absolute;
  left: 10px;
  right: -12px;
  bottom: -30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 12px 22px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: 0 14px 34px rgba(42, 27, 34, .16);
}

.osoba__opis { display: grid; gap: 2px; min-width: 0; }
.osoba__nazwisko {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-brand);
}
.osoba__rola {
  font-size: .875rem;
  line-height: 1.35;
  color: var(--c-muted);
}

.osoba__strzalka {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: var(--c-brand);
  color: var(--c-on-dark);
  display: grid;
  place-items: center;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.osoba__strzalka svg { width: 22px; height: 22px; }
.osoba__link:hover .osoba__strzalka {
  background: var(--c-brand-dark);
  transform: translateX(3px);
}

.zespol__wiecej { margin: var(--sp-6) 0 0; }

/* Pole zastepcze dla osob bez zdjecia: inicjaly w tej samej proporcji 4:5 */
.osoba__foto--brak {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--c-surface-alt);
}
.osoba__inicjaly {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: var(--fw-heading);
  color: var(--c-brand);
  opacity: .45;
}

/* Pelna lista zespolu na podstronie: ten sam uklad, wiecej wierszy */
.zespol__siatka--pelna { row-gap: 56px; }

@media (max-width: 1100px) {
  .zespol__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .zespol__siatka { grid-template-columns: 1fr; gap: 46px; }
  /* Przy jednej kolumnie plakietka nie ma gdzie wystawac, wiec mieści się
     w obrysie zdjęcia. */
  .osoba__plakietka { left: 12px; right: 12px; padding-left: 18px; }
  .osoba__strzalka { width: 46px; height: 46px; }
}

/* ---------------------------------------------------------------- O nas */
/* Uklad strony About szablonu Dentalic (dentisttemplate.webflow.io/about):
   jasne hero z H1 58 px i szerokim zdjeciem o promieniu 32 px, sekcja
   historii z dwoma zdjeciami 465 x 519 obroconymi o 10 stopni, siatka
   kart 2 x 2 z ikona 80 px, zespol w czterech kolumnach z kwadratowym
   zdjeciem o promieniu 54 px. Pierscienie w tle to dekoracja. */

.onas-hero, .onas-historia, .onas-praktyka, .onas-zespol {
  position: relative; overflow: hidden;
}
.onas-krag {
  position: absolute; pointer-events: none; z-index: 0;
  width: 300px; height: 300px; border-radius: 50%;
  border: 44px solid #F1DFE1;
}
.onas-hero .container, .onas-historia .container,
.onas-praktyka .container, .onas-zespol .container { position: relative; z-index: 1; }

/* Hero: nadtytul, H1 i akapit po lewej, "Przewin nizej" po prawej,
   pod spodem zdjecie na cala szerokosc kontenera */
.onas-hero { padding-block: var(--sp-10) 0; background: var(--c-surface); }
.onas-krag--hero { width: 354px; height: 354px; right: -150px; top: -40px; }
.onas-hero .okruszki { color: var(--c-muted); }
.onas-hero__gora {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.onas-hero__tekst { max-width: 744px; }
.onas-hero__tekst h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.625rem); line-height: 1.05;
  margin: 0 0 var(--sp-4); max-width: none;
}
.onas-hero__zajawka {
  max-width: 560px; margin: 0; color: var(--c-text);
  font-size: 1.125rem; line-height: 1.65;
}
.onas-hero__przewin {
  display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
  padding-bottom: 6px; color: var(--c-muted); font-weight: var(--fw-medium);
  text-decoration: none;
}
.onas-hero__przewin:hover { color: var(--c-brand); }
.onas-hero__mysz {
  position: relative; width: 22px; height: 34px;
  border: 2px solid currentColor; border-radius: 12px;
}
.onas-hero__mysz::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  margin-left: -2px; border-radius: 2px; background: currentColor;
  animation: onas-mysz 1.6s var(--ease) infinite;
}
@keyframes onas-mysz {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(9px); opacity: .2; }
}
.onas-hero__foto { margin: 0; }
.onas-hero__foto img {
  display: block; width: 100%; height: auto; border-radius: 32px;
  box-shadow: var(--sh-soft);
}
.onas-hero__foto figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-muted); text-align: center;
}

/* Wspolny naglowek sekcji: pigulka, H2, akapity, wszystko wysrodkowane */
.onas-naglowek { max-width: 700px; margin: 0 auto var(--sp-10); text-align: center; }
.onas-naglowek h2 {
  margin: 0 0 var(--sp-4); max-width: none;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 2.5rem); line-height: 1.2;
}
.onas-naglowek p { margin: 0 auto var(--sp-4); max-width: 640px; color: var(--c-text); font-size: 1.0625rem; line-height: 1.7; }
.onas-naglowek p:last-child { margin-bottom: 0; }
.onas-naglowek a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* Historia: dwa zdjecia pod katem w polu 968 x 592 */
.onas-historia { padding-block: var(--section-py); background: var(--c-surface); }
.onas-krag--historia-1 { width: 278px; height: 278px; left: -84px; top: 230px; }
.onas-krag--historia-2 { width: 228px; height: 228px; right: -67px; bottom: 296px; }
.onas-historia__zdjecia {
  position: relative; max-width: 968px; margin: var(--sp-12) auto 0;
  aspect-ratio: 968 / 592;
}
.onas-historia__zdjecie {
  position: absolute; top: 6.1%; width: 48%; height: auto; aspect-ratio: 465 / 519;
  object-fit: cover; border-radius: clamp(24px, 4.5vw, 54px); max-width: none;
}
.onas-historia__zdjecie--1 {
  left: 3.9%; z-index: 1; transform: rotate(-10deg);
  box-shadow: 0 9px 64px rgba(42, 27, 34, .14);
}
.onas-historia__zdjecie--2 { left: 47.8%; transform: rotate(10deg); }

/* W praktyce: karty 2 x 2, ikona 80 px w kwadracie, przyciski pod spodem */
.onas-praktyka { padding-block: var(--section-py); background: var(--c-surface-alt); }
.onas-krag--praktyka-1 { width: 230px; height: 230px; left: -180px; top: -130px; }
.onas-krag--praktyka-2 { width: 335px; height: 335px; right: -216px; top: 93px; border-color: #EBD5DA; }
.onas-karty {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 26px;
}
.onas-karta {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 40px 35px 44px; border-radius: 32px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: 0 2px 8px rgba(110, 51, 80, .03), 0 1px 13px rgba(42, 27, 34, .02);
}
.onas-karta__ikona {
  flex: 0 0 auto; width: 80px; height: 80px; border-radius: 22px;
  display: grid; place-items: center;
  background: #F6EDEA; color: var(--c-brand); --ikona-tlo: #F6EDEA;
}
.onas-karta__ikona svg { width: 44px; height: 44px; }
.onas-karta__tresc h3 { margin: 4px 0 6px; font-size: 1.5rem; line-height: 1.25; }
.onas-karta__tresc h3 a { color: inherit; text-decoration: none; }
.onas-karta__tresc h3 a:hover { color: var(--c-brand); }
.onas-karta__tresc p { margin: 0; color: var(--c-text); font-size: 1.0625rem; line-height: 1.65; }
.onas-praktyka__dopelnienie {
  max-width: 640px; margin: var(--sp-10) auto 0; text-align: center;
  color: var(--c-text); font-size: 1.0625rem; line-height: 1.7;
}
.onas-praktyka__dopelnienie p { margin: 0 0 var(--sp-3); max-width: none; }
.onas-praktyka__dopelnienie a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.onas-praktyka__akcje {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.onas-praktyka__akcje .btn { border-radius: 12px; }

/* Zespol: troje w rzedzie, kwadratowe zdjecie, imie, rola, dwa przyciski,
   pod spodem przycisk do pelnej listy */
.onas-zespol { padding-block: var(--section-py); background: var(--c-surface); }
.onas-krag--zespol-1 { width: 238px; height: 238px; right: -120px; top: -100px; }
.onas-krag--zespol-2 { width: 278px; height: 278px; left: -160px; bottom: -80px; }
.onas-zespol__siatka {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px;
  max-width: 980px; margin-inline: auto;
}
.onas-osoba { text-align: center; }
.onas-zespol__akcje { display: flex; justify-content: center; margin-top: var(--sp-10); }
.onas-zespol__akcje .btn { border-radius: 12px; }
.onas-osoba__foto {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 30px;
  border-radius: clamp(28px, 4vw, 54px); background: #F6EDEA;
}
.onas-osoba__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.onas-osoba__foto--brak { display: grid; place-items: center; }
.onas-osoba__inicjaly {
  font-family: var(--font-heading); font-size: 3rem; font-weight: var(--fw-heading);
  color: var(--c-brand); letter-spacing: .04em;
}
.onas-osoba__nazwisko { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.25; }
.onas-osoba__nazwisko a { color: inherit; text-decoration: none; }
.onas-osoba__nazwisko a:hover { color: var(--c-brand); }
.onas-osoba__rola { margin: 0 0 14px; color: var(--c-text); font-size: 1rem; }
.onas-osoba__akcje { display: flex; justify-content: center; gap: 8px; }
.onas-osoba__przycisk {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-brand); color: var(--c-on-dark);
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.onas-osoba__przycisk svg { width: 17px; height: 17px; }
.onas-osoba__przycisk:hover { background: var(--c-brand-dark); transform: translateY(-2px); }
.onas-osoba__przycisk:focus-visible { outline: 3px solid var(--c-brand-dark); outline-offset: 3px; }

@media (max-width: 800px) {
  .onas-hero__gora { margin-bottom: var(--sp-8); }
  .onas-hero__przewin { display: none; }
  .onas-karty { grid-template-columns: 1fr; gap: 16px; }
  .onas-karta { padding: 28px 24px 30px; border-radius: 24px; gap: 18px; }
  .onas-karta__ikona { width: 64px; height: 64px; border-radius: 18px; }
  .onas-karta__ikona svg { width: 36px; height: 36px; }
  .onas-karta__tresc h3 { font-size: 1.25rem; }
}
@media (max-width: 700px) {
  .onas-hero { padding-top: var(--sp-6); }
  .onas-hero__foto img { border-radius: 20px; }
  .onas-historia, .onas-praktyka, .onas-zespol { padding-block: var(--section-py-mobile); }
  .onas-naglowek { margin-bottom: var(--sp-8); }
  .onas-historia__zdjecia { margin-top: var(--sp-8); }
  .onas-historia__zdjecie { width: 56%; top: 4%; }
  .onas-historia__zdjecie--1 { left: 0; transform: rotate(-8deg); }
  .onas-historia__zdjecie--2 { left: 44%; transform: rotate(8deg); }
  /* Na telefonie jedna kolumna: trzy osoby pod soba, zdjecie wezsze od ekranu */
  .onas-zespol__siatka { grid-template-columns: 1fr; gap: 36px; max-width: 320px; }
  .onas-osoba__foto { margin-bottom: 18px; }
  .onas-osoba__nazwisko { font-size: 1.125rem; }
  .onas-osoba__rola { font-size: .9375rem; }
  .onas-krag { display: none; }
}

/* ---------------------------------------------------------------- Kontakt */
/* Uklad strony Contact szablonu Dentalic: lewa kolumna 451 px z H1 58 px,
   akapitem i lista "Wiecej informacji" (ikona 56 px, tytul 18 px), prawa
   kolumna 673 px z biala karta formularza (promien 32 px, pola 60 px
   o promieniu 12 px). Karta zachodzi na sekcje FAQ ponizej. Tlo czysto
   biale, bez pierscienia w tle (decyzja klienta). */
.kontakt { position: relative; overflow: hidden; padding-block: var(--sp-10) 0; background: var(--c-surface); }
.kontakt__uklad {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 451fr) minmax(0, 673fr);
  gap: 60px; align-items: start;
}
.kontakt__lewa { padding-bottom: var(--sp-12); }
.kontakt .okruszki { color: var(--c-muted); }
.kontakt__lewa h1 {
  margin: 0 0 var(--sp-3); max-width: none;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.625rem); line-height: 1.05;
}
.kontakt__zajawka { margin: 0 0 var(--sp-8); color: var(--c-text); font-size: 1.125rem; line-height: 1.65; max-width: 30em; }
.kontakt__wiecej { margin: 0 0 var(--sp-5); font-size: 1.5rem; }
.kontakt__info { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.kontakt__wiersz { display: flex; gap: 18px; align-items: flex-start; }
.kontakt__ikona {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; background: #F6EDEA; color: var(--c-brand);
}
.kontakt__ikona svg { width: 26px; height: 26px; }
.kontakt__wiersz h3 { margin: 4px 0 6px; font-size: 1.125rem; }
.kontakt__wiersz p { margin: 0; color: var(--c-text); font-size: 1.0625rem; line-height: 1.6; max-width: none; }
.kontakt__wiersz a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.kontakt__wiersz .do-uzupelnienia { margin-top: 4px; }
.kontakt__godziny { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--c-text); font-size: 1rem; }
.kontakt__godziny li { display: flex; justify-content: space-between; gap: 16px; max-width: 320px; }
.kontakt__godziny b { font-weight: var(--fw-medium); color: var(--c-ink); white-space: nowrap; }
.kontakt__dopisek { margin-top: 8px !important; font-size: var(--fs-small) !important; color: var(--c-muted) !important; }
.kontakt__nagle {
  margin-top: var(--sp-8); padding: 22px 24px; border-radius: 16px;
  background: #FFF7EA; border: 1px solid #F1DFC0;
}
.kontakt__nagle h2 { margin: 0 0 8px; font-size: 1.125rem; color: #8A5A00; }
.kontakt__nagle p { margin: 0; color: var(--c-text); font-size: .9375rem; line-height: 1.6; max-width: none; }
.kontakt__nagle b { color: var(--c-ink); }

/* Karta formularza */
.kontakt__karta {
  position: relative; z-index: 2; margin-bottom: -90px;
  padding: clamp(32px, 5vw, 70px) clamp(22px, 4.5vw, 60px);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 32px;
  box-shadow: 0 2px 8px rgba(110, 51, 80, .04), 0 12px 40px rgba(42, 27, 34, .08);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.kontakt + .faq { padding-top: calc(var(--section-py) + 90px); }
.formularz__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.formularz__pole { display: flex; flex-direction: column; }
.formularz__pole--szerokie { grid-column: 1 / -1; }
.formularz label {
  margin-bottom: 12px; font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: 1.0625rem; color: var(--c-ink);
}
.formularz input, .formularz select, .formularz textarea {
  width: 100%; padding: 8px 18px; min-height: 60px;
  border: 1px solid var(--c-border-strong); border-radius: 12px;
  background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.formularz select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E3350' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.formularz textarea { min-height: 147px; padding: 18px; resize: vertical; }
.formularz input::placeholder, .formularz textarea::placeholder { color: var(--c-muted-light); }
.formularz input:focus-visible, .formularz select:focus-visible, .formularz textarea:focus-visible {
  outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(110, 51, 80, .18);
}
.formularz__zgoda {
  display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0;
  font-family: var(--font-body); font-weight: var(--fw-regular); font-size: .9375rem;
  line-height: 1.55; color: var(--c-text);
}
.formularz__zgoda input {
  flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0;
  accent-color: var(--c-brand);
}
.formularz__zgoda a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.formularz__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formularz__wyslij { margin-top: 28px; border-radius: 12px; }
.formularz__wyslij[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.formularz__wyslij[disabled]:hover { background: var(--c-brand); border-color: var(--c-brand); }
.formularz__nota { margin: 14px 0 0; font-size: var(--fs-small); color: var(--c-muted); max-width: none; }

/* Profile w internecie: naglowek z przyciskiem po prawej i cztery karty */
.kontakt-profile { padding-block: var(--section-py); background: var(--c-surface); }
.kontakt-profile__gora {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.kontakt-profile__gora h2 { margin: 0; max-width: 12em; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem); line-height: 1.2; }
.kontakt-profile__gora .btn { border-radius: 12px; flex: 0 0 auto; }
.kontakt-profile__siatka {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px;
}
.kontakt-profile__karta {
  padding: 40px 26px 44px; border-radius: 20px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: 0 4px 10px rgba(110, 51, 80, .06);
}
.kontakt-profile__ikona {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px;
  border-radius: 14px; background: var(--c-brand); color: var(--c-on-dark);
}
.kontakt-profile__ikona svg { width: 26px; height: 26px; }
.kontakt-profile__karta h3 { margin: 0 0 7px; font-size: 1.375rem; }
.kontakt-profile__karta p { margin: 0 0 16px; color: var(--c-text); font-size: 1rem; line-height: 1.6; max-width: none; }
.kontakt-profile__karta .do-uzupelnienia { margin: 0; }
.kontakt-profile__link { font-weight: var(--fw-semibold); color: var(--c-brand); text-decoration: none; }
.kontakt-profile__link::after { content: " \2192"; }
.kontakt-profile__link:hover { color: var(--c-brand-dark); text-decoration: underline; }

@media (max-width: 1100px) {
  .kontakt-profile__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kontakt__uklad { grid-template-columns: 1fr; gap: var(--sp-8); }
  .kontakt__lewa { padding-bottom: 0; }
  .kontakt__karta { margin-bottom: -60px; border-radius: 24px; }
  .kontakt + .faq { padding-top: calc(var(--section-py-mobile) + 60px); }
}
@media (max-width: 700px) {
  .kontakt { padding-top: var(--sp-6); }
  .formularz__siatka { grid-template-columns: 1fr; gap: 18px; }
  .formularz input, .formularz select, .formularz textarea { min-height: 54px; }
  .kontakt-profile { padding-block: var(--section-py-mobile); }
  .kontakt-profile__gora { flex-direction: column; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-6); }
  .kontakt-profile__siatka { grid-template-columns: 1fr; gap: 16px; }
  .kontakt-profile__karta { padding: 28px 22px 30px; }
  .kontakt__godziny li { max-width: none; }
}

/* ------------------------------------------------- Podstrony jak w szablonie */
/* Wszystkie podstrony poza strona glowna w ukladzie szablonu Dentalic:
   jasny pas u gory z H1 58 px zamiast ciemnego hero, karty o promieniu
   32 px, przyklejona karta rejestracji po prawej na stronach uslug
   i profili, karty uslug po trzy w rzedzie. */

/* Pas u gory strony */
.pas { background: var(--c-surface-alt); padding-block: var(--sp-8) var(--sp-12); }
.pas .okruszki { color: var(--c-muted); margin-bottom: var(--sp-6); }
.okruszki--srodek ol { justify-content: center; }
.pas__tresc { max-width: 720px; }
.pas__tresc h1 {
  margin: 0 0 var(--sp-4); max-width: none;
  font-size: clamp(2.375rem, 1.5rem + 3.2vw, 3.625rem); line-height: 1.05;
}
.pas__zajawka { margin: 0; color: var(--c-text); font-size: 1.125rem; line-height: 1.65; max-width: 36em; }
.pas__gora { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-8); }
.pas__przycisk { flex: 0 0 auto; border-radius: 12px; margin-bottom: 6px; }
.pas__ikona {
  display: grid; place-items: center; width: 125px; height: 125px; margin-bottom: var(--sp-6);
  border-radius: 29px; background: var(--c-surface); color: var(--c-brand);
  --ikona-tlo: var(--c-surface);
  box-shadow: 0 2px 8px rgba(110, 51, 80, .04), 0 1px 13px rgba(42, 27, 34, .03);
}
.pas__ikona svg { width: 66px; height: 66px; }
/* Pas uslugi i profilu ma dodatkowy oddech u dolu: na nim zaczyna sie
   przyklejona karta rejestracji z nastepnej sekcji */
.pas--usluga { padding-bottom: 170px; }
.pas--usluga .pas__tresc { max-width: 59%; }
.usluga__akcje { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.usluga__akcje .btn { border-radius: 12px; }

/* Fakty pod przyciskami: rzad kafelkow */
.fakty {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.fakt {
  display: grid; gap: 2px; padding: 12px 18px; border-radius: 14px;
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.fakt__etykieta {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted);
}
.fakt__wartosc {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: 1.0625rem; color: var(--c-ink); font-variant-numeric: tabular-nums;
}

/* Uklad z boczna karta, ktora wchodzi na pas */
.uklad-z-bokiem--szablon { grid-template-columns: minmax(0, 1fr) 403px; gap: 60px; }
.section--z-karta { padding-top: var(--sp-8); }
.bok--szablon { margin-top: calc(-170px - var(--sp-8) - 40px); gap: var(--sp-5); }
.bok--szablon .bok__blok { border-radius: 24px; padding: 28px 30px; }
.bok__foto { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-full); overflow: hidden; }
.bok__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.karta-rejestracji {
  padding: 46px 31px 50px; border-radius: 32px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: 0 2px 8px rgba(110, 51, 80, .04), 0 12px 40px rgba(42, 27, 34, .08);
}
.karta-rejestracji__ikona {
  display: grid; place-items: center; width: 90px; height: 90px; margin-bottom: 26px;
  border-radius: 24px; background: #F6EDEA; color: var(--c-brand);
}
.karta-rejestracji__ikona svg { width: 40px; height: 40px; }
.karta-rejestracji__tytul { margin: 0 0 8px; font-size: 1.625rem; line-height: 1.2; }
.karta-rejestracji__tekst { margin: 0 0 22px; color: var(--c-text); font-size: 1rem; line-height: 1.6; max-width: none; }
.karta-rejestracji__tel {
  display: block; margin-bottom: 18px; font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: var(--fw-semibold); color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.karta-rejestracji .do-uzupelnienia { margin-bottom: 18px; }
.karta-rejestracji__przycisk { width: 100%; border-radius: 12px; }

/* Karty uslug po trzy w rzedzie */
.siatka-uslug {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
}
.karta-uslugi {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 32px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: 0 2px 8px rgba(110, 51, 80, .03), 0 1px 13px rgba(42, 27, 34, .02);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-slow) var(--ease);
}
.karta-uslugi:hover { box-shadow: var(--sh-lift); transform: translateY(-4px); }
.karta-uslugi__obraz {
  display: grid; place-items: center; height: 239px;
  background: #F6EDEA; color: var(--c-brand); --ikona-tlo: #F6EDEA;
}
.karta-uslugi__obraz svg { width: 110px; height: 110px; }
.karta-uslugi__tresc { padding: 32px 32px 40px; }
.karta-uslugi__tytul { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.25; }
.karta-uslugi__tytul a { color: inherit; text-decoration: none; }
.karta-uslugi__tytul a:hover { color: var(--c-brand); }
.karta-uslugi__opis { margin: 0 0 20px; color: var(--c-text); font-size: 1.0625rem; line-height: 1.65; max-width: none; }
.karta-uslugi__link { font-weight: var(--fw-semibold); color: var(--c-brand); text-decoration: none; }
.karta-uslugi__link::after { content: " \2192"; }
.karta-uslugi__link:hover { color: var(--c-brand-dark); text-decoration: underline; }

.lista-uslug__grupa + .lista-uslug__grupa { margin-top: var(--sp-16); }
.lista-uslug__dziedzina { margin: 0 0 var(--sp-6); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem); }

.wiecej-uslug { padding-block: var(--section-py); background: var(--c-surface); }
.wiecej-uslug__gora {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.wiecej-uslug__gora h2 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem); }
.wiecej-uslug__gora .btn { border-radius: 12px; flex: 0 0 auto; }

/* Lista specjalistow: wysrodkowany naglowek i cztery kolumny */
.zespol-lista { position: relative; overflow: hidden; padding-block: var(--sp-8) var(--section-py); background: var(--c-surface); }
.zespol-lista .container { position: relative; z-index: 1; }
.zespol-lista .okruszki { color: var(--c-muted); margin-bottom: var(--sp-8); }
.onas-naglowek h1 {
  margin: 0 0 var(--sp-4); max-width: none;
  font-size: clamp(2.375rem, 1.5rem + 3.2vw, 3.625rem); line-height: 1.05;
}
.onas-naglowek--szeroki { max-width: 806px; }
.onas-zespol__siatka--cztery { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 40px 25px; }

/* Cennik: karty dziedzin jak "card plan" */
.cennik { position: relative; overflow: hidden; padding-block: var(--sp-8) var(--section-py); background: var(--c-surface); }
.cennik .container { position: relative; z-index: 1; }
.cennik .okruszki { color: var(--c-muted); margin-bottom: var(--sp-8); }
.plany {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px;
}
.plan {
  display: flex; flex-direction: column; padding: 42px 34px 44px; border-radius: 28px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: 0 4px 20px rgba(110, 51, 80, .07);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.plan__gora { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.plan__ikona {
  display: grid; place-items: center; flex: 0 0 auto; width: 76px; height: 76px;
  border-radius: 20px; background: #F6EDEA; color: var(--c-brand); --ikona-tlo: #F6EDEA;
}
.plan__ikona svg { width: 42px; height: 42px; }
.plan__nazwa { margin: 0 0 1px; font-size: 1.5rem; line-height: 1.25; }
.plan__liczba { margin: 0; color: var(--c-muted); font-size: 1rem; }
.plan__cena { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; max-width: none; }
.plan__cena b { font-family: var(--font-heading); font-size: 2.5rem; line-height: 1; color: var(--c-brand); font-weight: var(--fw-heading); }
.plan__cena span { color: var(--c-muted); font-weight: var(--fw-medium); }
.plan__cena--brak b { font-size: 1.75rem; }
.plan__opis { margin: 0; color: var(--c-text); font-size: 1rem; line-height: 1.6; max-width: none; }
.plan__linia { border: 0; height: 1px; margin: 34px 0 30px; background: var(--c-border); }
.plan__lista { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: 14px; }
.plan__lista li { display: flex; align-items: center; gap: 12px; color: var(--c-text); font-size: 1.0625rem; scroll-margin-top: calc(var(--header-h) + 20px); }
.plan__lista a { color: var(--c-ink); text-decoration: none; }
.plan__lista a:hover { color: var(--c-brand); text-decoration: underline; }
.plan__ptaszek {
  display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px;
  border-radius: 50%; background: var(--c-brand); color: var(--c-on-dark);
}
.plan__ptaszek svg { width: 14px; height: 14px; }
.plan__kwota { margin-left: auto; color: var(--c-muted); font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan__przycisk { width: 100%; margin-top: 34px; border-radius: 12px; }
.cennik-dol { background: var(--c-surface-alt); }
.cennik-dol__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.cennik-dol__blok {
  padding: 40px 36px; border-radius: 28px;
  background: var(--c-surface); border: 1px solid var(--c-border);
}
.cennik-dol__blok h2 { margin: 0 0 14px; font-size: 1.5rem; }
.cennik-dol__blok p { margin: 0 0 10px; color: var(--c-text); max-width: none; }
.cennik-dol__blok p:last-child { margin-bottom: 0; }

/* 404 */
.strona-404 { position: relative; overflow: hidden; padding-block: var(--sp-20); background: var(--c-surface); }
.strona-404 .container { position: relative; z-index: 1; }
.strona-404__akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.strona-404__akcje .btn { border-radius: 12px; }

@media (max-width: 1100px) {
  .onas-zespol__siatka--cztery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plany { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uklad-z-bokiem--szablon { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}
@media (max-width: 1000px) {
  .uklad-z-bokiem--szablon { grid-template-columns: 1fr; }
  .bok--szablon { margin-top: 0; }
  .pas--usluga { padding-bottom: var(--sp-10); }
  .pas--usluga .pas__tresc { max-width: 720px; }
}
@media (max-width: 900px) {
  .siatka-uslug { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 700px) {
  .pas { padding-block: var(--sp-6) var(--sp-8); }
  .pas .okruszki { margin-bottom: var(--sp-4); }
  .pas__gora { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .pas__ikona { width: 84px; height: 84px; border-radius: 20px; margin-bottom: var(--sp-4); }
  .pas__ikona svg { width: 46px; height: 46px; }
  .siatka-uslug { grid-template-columns: 1fr; gap: 16px; }
  .karta-uslugi { border-radius: 24px; }
  .karta-uslugi__obraz { height: 180px; }
  .karta-uslugi__obraz svg { width: 84px; height: 84px; }
  .karta-uslugi__tresc { padding: 24px 22px 28px; }
  .lista-uslug__grupa + .lista-uslug__grupa { margin-top: var(--sp-10); }
  .wiecej-uslug { padding-block: var(--section-py-mobile); }
  .wiecej-uslug__gora { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .zespol-lista, .cennik { padding-block: var(--sp-6) var(--section-py-mobile); }
  .onas-zespol__siatka--cztery { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; gap: 36px; }
  .plany { grid-template-columns: 1fr; gap: 18px; }
  .plan { padding: 30px 24px 32px; border-radius: 24px; }
  .cennik-dol__siatka { grid-template-columns: 1fr; gap: 16px; }
  .cennik-dol__blok { padding: 28px 24px; }
  .karta-rejestracji { padding: 32px 24px 34px; border-radius: 24px; }
  .strona-404 { padding-block: var(--sp-12); }
}

/* --------------------------------------------- Profil specjalisty (ReliaCare) */
/* Uklad strony lekarza z szablonu ReliaCare: pastelowy pas 419 px
   z wysrodkowanym nazwiskiem 64 px, dwie karty 492 px obok siebie
   (zdjecie i "O mnie"), szeroka karta z dwiema kolumnami i kreska,
   sekcje biogramu z naglowkami 40 px, blok "Umow wizyte". Kolor kart
   #FCFAF7 z szablonu, promien 16 px. */

/* Pastelowe tlo pasa i sekcji wartosci: rozmyte plamy rozu i piasku
   w miejsce zielono-zoltej grafiki szablonu */
.tlo-pastel {
  background:
    radial-gradient(ellipse 55% 70% at 12% 20%, rgba(232, 208, 212, .95), transparent 70%),
    radial-gradient(ellipse 45% 60% at 88% 15%, rgba(247, 233, 217, .95), transparent 70%),
    radial-gradient(ellipse 60% 55% at 70% 90%, rgba(200, 138, 160, .35), transparent 70%),
    radial-gradient(ellipse 50% 60% at 25% 95%, rgba(241, 223, 225, .9), transparent 70%),
    linear-gradient(180deg, #FBF4F1, #F3E3E4);
}

.profil__pas {
  min-height: 419px; padding-block: 60px 100px; text-align: center;
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse 55% 70% at 12% 20%, rgba(232, 208, 212, .95), transparent 70%),
    radial-gradient(ellipse 45% 60% at 88% 15%, rgba(247, 233, 217, .95), transparent 70%),
    radial-gradient(ellipse 60% 55% at 70% 90%, rgba(200, 138, 160, .35), transparent 70%),
    radial-gradient(ellipse 50% 60% at 25% 95%, rgba(241, 223, 225, .9), transparent 70%),
    linear-gradient(180deg, #FBF4F1, #F3E3E4);
}
.profil__pas .container { width: 100%; }
.profil__pas .okruszki { color: var(--c-muted); margin-bottom: var(--sp-8); }
.profil__nadtytul {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text);
}
.profil__nadtytul span { width: 8px; height: 8px; background: var(--c-brand); }
.profil__pas h1 {
  margin: 0 0 12px; max-width: none;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); line-height: 1.2; font-weight: var(--fw-medium);
  color: var(--c-brand-dark);
}

.profil__tresc { padding-block: 100px; }
.profil__karta { background: #FCFAF7; border-radius: 16px; }

.profil__gora {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  align-items: stretch; margin-bottom: 24px;
}
.profil__foto { border-radius: 16px; overflow: hidden; background: #F6EDEA; min-height: 480px; }
.profil__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.profil__foto--brak { display: grid; place-items: center; }
.profil__inicjaly {
  font-family: var(--font-heading); font-size: 5rem; font-weight: var(--fw-heading);
  color: var(--c-brand); letter-spacing: .04em;
}
.profil__o { padding: 40px 32px; display: flex; flex-direction: column; }
.profil__o-tytul { margin: 0 0 var(--sp-6); max-width: none; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.2; font-weight: var(--fw-medium); color: var(--c-ink); }
.profil__o-linia { display: block; }
.profil__o-tekst { color: var(--c-text); font-size: 1.0625rem; line-height: 1.55; }
.profil__o-tekst p { margin: 0 0 var(--sp-4); max-width: none; }
.profil__o-tekst p:last-child { margin-bottom: 0; }
.profil__o-tekst a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.profil__ikony { display: flex; gap: 24px; margin-top: auto; padding-top: var(--sp-6); }
.profil__ikona {
  display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%;
  background: var(--c-brand-dark); color: var(--c-on-dark);
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.profil__ikona svg { width: 19px; height: 19px; }
.profil__ikona:hover { background: var(--c-brand); transform: translateY(-2px); }
.profil__ikona:focus-visible { outline: 3px solid var(--c-brand-dark); outline-offset: 3px; }

.profil__srodek {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 48px;
  padding: 48px; margin-bottom: 48px; scroll-margin-top: calc(var(--header-h) + 20px);
}
.profil__kreska { display: block; width: 1px; background: #D8CFCB; align-self: stretch; }
.profil__kolumna h2 {
  margin: 0 0 var(--sp-4); max-width: none;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.2; font-weight: var(--fw-medium);
  color: var(--c-brand-dark);
}
.profil__kolumna h3 { margin: var(--sp-5) 0 var(--sp-3); font-size: 1.125rem; }
.profil__kolumna ul { margin: 0; padding-left: 24px; display: grid; gap: 8px; color: var(--c-text); font-size: 1.0625rem; line-height: 1.4; }
.profil__kolumna li::marker { color: var(--c-muted); }
.profil__kolumna a { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.profil__kolumna a:hover { color: var(--c-brand); }
.profil__kolumna .do-uzupelnienia { margin: 0; }

.profil__sekcja { margin-top: 40px; }
.profil__sekcja h2 {
  margin: 0 0 var(--sp-4); max-width: none;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.2; font-weight: var(--fw-medium);
  color: var(--c-brand-dark);
}
.profil__sekcja .proza { max-width: none; color: var(--c-text); font-size: 1.0625rem; line-height: 1.55; }
.profil__sekcja .proza p, .profil__sekcja .proza ul { max-width: 78ch; }
.profil__sekcja .proza h3 { font-size: 1.25rem; margin-top: var(--sp-6); }
.profil__umow p { max-width: 70ch; color: var(--c-text); font-size: 1.0625rem; margin: 0 0 var(--sp-6); }
.profil__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.profil__akcje .do-uzupelnienia { margin: 0; }
.profil__tel { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.btn__strzalka {
  display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -8px -4px 2px;
  border-radius: 50%; background: rgba(255, 255, 255, .18);
}
.btn__strzalka svg { width: 14px; height: 14px; }

/* Wartosci na stronie O nas: siatka jak w szablonie ReliaCare */
.onas-zasady { padding-block: var(--section-py); background: var(--c-surface-alt); }
.onas-naglowek--zasady { margin-bottom: var(--sp-8); }
.wartosci {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.wartosc {
  display: flex; flex-direction: column; min-height: 400px; padding: 24px 28px 36px;
  background: var(--c-surface); border-radius: 20px;
}
.wartosc--szeroka { grid-column: span 2; }
.wartosc__gora {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 42px; margin-bottom: auto; border-bottom: 1px solid #D8CFCB;
}
.wartosc__gora h3 {
  margin: 12px 0 0; min-width: 0; overflow-wrap: normal; hyphens: manual;
  font-size: clamp(1.375rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.2;
  font-weight: var(--fw-medium); color: var(--c-brand-dark);
}
/* Numer skaluje sie z szerokoscia karty, zeby przy dlugim tytule
   (Przeciwwskazania) nie wychodzil poza krawedz */
.wartosc__numer {
  flex: 0 0 auto;
  font-family: var(--font-heading); font-size: clamp(2.5rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1;
  font-weight: var(--fw-heading); color: transparent; -webkit-text-stroke: 1.5px #CFC4C0; letter-spacing: .02em;
}
.wartosc p { margin: 0; padding-top: 48px; color: var(--c-text); font-size: 1.0625rem; line-height: 1.6; max-width: none; }

@media (max-width: 1100px) {
  /* Ponizej 1100 px trzy karty wartosci sa za waskie na numer obok tytulu */
  .wartosci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .profil__gora { grid-template-columns: 1fr; }
  .profil__foto { min-height: 0; aspect-ratio: 4 / 5; max-width: 492px; }
  .profil__srodek { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .profil__kreska { width: 100%; height: 1px; }
  .wartosc { min-height: 320px; }
}
@media (max-width: 700px) {
  .profil__pas { min-height: 0; padding-block: var(--sp-6) var(--sp-10); }
  .profil__pas .okruszki { margin-bottom: var(--sp-5); }
  .profil__tresc { padding-block: var(--section-py-mobile); }
  .profil__o { padding: 28px 22px; }
  .profil__ikony { gap: 14px; }
  .profil__srodek { margin-bottom: 32px; }
  .onas-zasady { padding-block: var(--section-py-mobile); }
  .wartosci { grid-template-columns: 1fr; gap: 16px; }
  .wartosc, .wartosc--szeroka { grid-column: auto; min-height: 0; padding: 22px 22px 28px; }
  .wartosc__gora { padding-bottom: 22px; }
  .wartosc__numer { font-size: 3.25rem; }
  .wartosc p { padding-top: 22px; }
}