/* Klinika Lipowa · styl KLINIKA (biblioteka HVMBAK) */

:root {
  --krem: #f6f2ef;
  --bez: #eeeae4;
  --bez-2: #dbd5cb;
  --biel: #ffffff;
  --sliwka: #2d012b;
  --wrzos: #b8a7b1;
  --fiolet: #7f4666;
  --tekst: #14080f;
  --tekst-2: #5e4a58;
  --linia: #d3c8cc;
  --malina: #7c2343;
  --blad: #a2412f;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --szeroki: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --urzedowy: Helvetica, Arial, sans-serif;
  --krzywa: cubic-bezier(.2, .7, .2, 1);

  --m: 22px;        /* margines boczny */
  --pas: 56px;      /* pas górny */
  --nav: 72px;      /* nawigacja */
  --sek: 80px;      /* odstęp w sekcji */
}
@media (min-width: 760px) { :root { --m: 48px; --sek: 104px; } }
@media (min-width: 1100px) { :root { --pas: 72px; --nav: 96px; --sek: 128px; } }
@media (min-width: 1200px) { :root { --m: 80px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--sliwka);
  scroll-padding-top: var(--nav);
}

body {
  margin: 0;
  background: var(--krem);
  color: var(--tekst);
  font: 300 19px/1.55 var(--serif);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 200;
  color: var(--tekst);
}
h1 {
  font-size: clamp(50px, 7.2vw, 108px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--sliwka);
  text-align: center;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 200; }
h2 {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 { font-weight: 200; line-height: 1.15; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--fiolet); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- siatka ---------- */

.w {
  width: 100%;
  max-width: calc(1280px + 2 * var(--m));
  margin-inline: auto;
  padding-inline: var(--m);
}
.g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.g > * { grid-column: 1 / -1; min-width: 0; }

/* ---------- etykieta ---------- */

.et {
  margin: 0;
  font: 500 11px/1.5 var(--szeroki);
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-2);
}
.et .nr {
  color: var(--fiolet);
  margin-right: 1.2em;
  font-variant-numeric: tabular-nums;
}

/* ---------- strzałka: znak „→” zostaje w kodzie, widać cienką długą strzałkę ---------- */

.strz {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 12px;
  margin-left: 6px;
  overflow: hidden;
  color: transparent;
  vertical-align: -1px;
  transition: transform .3s var(--krzywa);
}
.strz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tusz, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 6h29.2M23.2 1.1l5.6 4.9-5.6 4.9' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M0 6h29.2M23.2 1.1l5.6 4.9-5.6 4.9' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- przyciski ---------- */

.btn {
  --tusz: var(--krem);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--sliwka);
  color: var(--krem);
  font: 400 18px/1 var(--serif);
  font-optical-sizing: auto;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn .strz { margin-left: 8px; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--malina);
  opacity: 0;
  transition: opacity .25s ease;
}
.btn:active { transform: translateY(1px); }
.btn-jasny { --tusz: var(--sliwka); background: var(--krem); color: var(--sliwka); }
.btn-jasny::before { background: var(--biel); }

.btn-txt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 300 18px/1 var(--serif);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  white-space: nowrap;
}

@media (hover: hover) {
  .btn:hover::before { opacity: 1; }
  .btn:hover .strz, .pas-cta:hover .strz { transform: translateX(4px); }
  .btn-txt:hover { text-decoration-color: transparent; }
}
.btn:focus-visible::before { opacity: 1; }
.btn:disabled { cursor: default; }
.btn:disabled:active { transform: none; }

/* wysłane zgłoszenie: strzałka zamienia się w znacznik */
.btn.wyslano { background: transparent; color: var(--sliwka); box-shadow: inset 0 0 0 1px var(--sliwka); }
.btn.wyslano::before { opacity: 0 !important; }
.btn.wyslano .strz { width: 14px; transform: none !important; }
.btn.wyslano .strz::after {
  inset: auto;
  left: 50%; top: 50%;
  width: 5px; height: 10px;
  background: none;
  -webkit-mask: none; mask: none;
  border: solid var(--sliwka);
  border-width: 0 1.25px 1.25px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}

/* ---------- pas górny ---------- */

.pas { background: var(--sliwka); color: var(--krem); }
.pas-in { display: flex; align-items: center; justify-content: flex-end; height: var(--pas); }
.pas-cta {
  --tusz: var(--krem);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 300 18px/1 var(--serif);
  text-decoration: none;
  white-space: nowrap;
}
.pas-cta .strz { margin-left: 10px; }
@media (min-width: 1100px) { .pas-cta { font-size: 24px; } .pas-cta .strz { width: 34px; margin-left: 12px; } }

/* ---------- nawigacja ---------- */

.nav {
  position: sticky;
  top: calc(-1 * var(--pas));   /* pas górny wyjeżdża za ekran, nawigacja zostaje */
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--krem);
}
.nav > .pas { order: -1; }
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--linia);
  opacity: 0;
  transition: opacity .25s ease;
}
.nav.z-linia::after { opacity: 1; }

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav);
}

/* znak firmy: nazwa wersalikami i pasek z czterech odcinków */
.marka {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: var(--tekst);
}
.marka-t {
  font: 500 16px/1 var(--szeroki);
  font-stretch: 125%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pasek {
  display: flex;
  height: 4px;
  margin: 12px -0.66em 0 -0.8em;   /* 0,8 em przed nazwą i za nią (ostatnia litera ma już za sobą odstęp 0,14 em) */
  font-size: 16px;
}
.pasek i { flex: 1; transform-origin: 0 50%; }
.pasek i:nth-child(1) { background: #9b7b8f; }
.pasek i:nth-child(2) { background: #7f4666; }
.pasek i:nth-child(3) { background: #7f2e57; }
.pasek i:nth-child(4) { background: #4a0e4c; }
@media (min-width: 1100px) {
  .marka-t { font-size: 21px; }
  .pasek { font-size: 21px; margin-top: 14px; }
}

.nav-linki { display: none; }

.menu-btn {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0 8px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn i { display: block; width: 26px; height: 1.5px; background: var(--tekst); }
.menu-btn i:nth-child(3) { width: 18px; }

@media (min-width: 1100px) {
  .nav-linki { display: block; }
  .nav-linki ul { display: flex; gap: 36px; }
  .nav-linki a {
    display: block;
    padding: 8px 0;
    font: 300 18px/1 var(--serif);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
    transition: text-decoration-color .2s ease;
  }
  .nav-linki a:hover { text-decoration-color: currentColor; }
  .nav-linki a:focus-visible { outline-offset: 6px; }
  .menu-btn, .menu { display: none !important; }
}

/* ---------- menu na telefonie: panel z prawej ---------- */

.menu { position: fixed; inset: 0; z-index: 40; }
.menu-tlo {
  position: absolute;
  inset: 0;
  background: rgba(184, 167, 177, .55);
  opacity: 0;
  transition: opacity .35s var(--krzywa);
}
.menu-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 88vw);
  padding: calc(env(safe-area-inset-top) + 84px) calc(var(--m) + env(safe-area-inset-right)) 0 32px;
  overflow-y: auto;
  background: var(--krem);
  transform: translateX(100%);
  transition: transform .45s var(--krzywa);
}
.menu.otw .menu-tlo { opacity: 1; }
.menu.otw .menu-panel { transform: none; }
.menu-x {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 14px);
  right: calc(var(--m) - 12px + env(safe-area-inset-right));
  width: 48px; height: 48px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-x::before, .menu-x::after {
  content: "";
  position: absolute;
  left: 13px; top: 23.5px;
  width: 22px; height: 1px;
  background: var(--tekst);
  transform: rotate(45deg);
}
.menu-x::after { transform: rotate(-45deg); }
.menu-panel ul { display: grid; gap: 6px; margin-bottom: 56px; }
.menu-panel li a {
  display: block;
  padding: 6px 0;
  font: 300 32px/1.15 var(--serif);
  font-optical-sizing: auto;
  text-decoration: none;
}
.menu-dol {
  margin: auto -32px 0;
  margin-right: calc(-1 * (var(--m) + env(safe-area-inset-right)));
  padding: 28px calc(var(--m) + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) 32px;
  background: var(--sliwka);
}
.menu-cta { width: 100%; }

/* ---------- zdjęcia ---------- */

.foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bez-2); }
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}

/* ---------- hero ---------- */

.hero-gora {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero-foto { aspect-ratio: 4 / 5; width: 100%; }
.hero-foto img { object-position: 50% 60%; }

.hero-pas { background: var(--sliwka); color: var(--krem); }
.hero-pas-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
  text-align: center;
}
.hero-p {
  max-width: 36em;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.38;
  font-weight: 300;
}
.hero-akcja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  margin-top: 40px;
}
.hero-btn { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.hero-btn .btn { width: 100%; }
.hero-btn .btn-txt { color: var(--krem); }
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--wrzos);
  font-variant-numeric: lining-nums tabular-nums;
}
.kropka { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wrzos); }

.fakty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 64px;
  border-top: 1px solid rgba(184, 167, 177, .35);
}
.fakty li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 12px;
  border-bottom: 1px solid rgba(184, 167, 177, .35);
}
.fakty li:nth-child(even) { border-left: 1px solid rgba(184, 167, 177, .35); }
.fakty li:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }
.fakt-n {
  font: 200 clamp(44px, 5vw, 76px)/1 var(--serif);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--krem);
}
.fakt-p { font-size: 16px; line-height: 1.4; color: var(--wrzos); text-wrap: balance; }

@media (min-width: 640px) {
  .hero-btn { flex-direction: row; justify-content: center; gap: 32px; width: auto; }
  .hero-btn .btn { width: auto; }
}
@media (min-width: 900px) {
  .hero-foto { aspect-ratio: 21 / 9; }
  .hero-foto img { object-position: 50% 68%; }
  .fakty { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; border-top: 0; }
  .fakty li { padding: 6px 24px; border-bottom: 0; border-left: 1px solid rgba(184, 167, 177, .35); }
  .fakty li:first-child { border-left: 0; }
  .fakty li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1100px) {
  .hero-gora { padding-top: 80px; padding-bottom: 80px; gap: 30px; }
  .hero-pas-in { padding-top: 112px; padding-bottom: 112px; }
  .hero-akcja { margin-top: 48px; }
  .fakty { margin-top: 88px; }
}

/* ---------- sekcje ---------- */

.sekcja { position: relative; padding: var(--sek) 0; }
.t-krem { background: var(--krem); }
.t-bez { background: var(--bez); }
.t-biel { background: var(--biel); }
/* dwie sąsiednie sekcje na tym samym tle oddziela linia */
.t-krem + .t-krem::before, .t-bez + .t-bez::before, .t-biel + .t-biel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--linia);
}

.glowa { display: grid; gap: 22px; margin-bottom: 48px; }
.glowa h2 { max-width: 16em; }
.glowa-et { margin-bottom: 40px; }
@media (min-width: 1100px) {
  .glowa { gap: 26px; margin-bottom: 72px; }
  .glowa-et { margin-bottom: 56px; }
}

/* 01 lista usług: rozwijane wiersze z plusem */
.sekcja.t-bez#zabiegi { padding-bottom: calc(var(--sek) - 30px); }
.usl { transition: background-color .35s var(--krzywa); }
.usl.otw { background: var(--bez-2); }
.usl h3 { font-size: clamp(28px, 3.3vw, 48px); }
.usl-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.usl-btn:focus-visible { outline-offset: -2px; }
.usl-n { min-width: 0; }
.plus { position: relative; flex: none; width: 32px; height: 32px; }
.plus::before, .plus::after {
  content: "";
  position: absolute;
  background: var(--tekst);
}
.plus::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.plus::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; transition: transform .3s var(--krzywa); }
.usl-btn[aria-expanded="true"] .plus::after { transform: scaleY(0); }
.usl-opis { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--krzywa); }
.usl-opis > div { min-height: 0; overflow: hidden; }
.usl-opis p {
  max-width: 52ch;
  padding-bottom: 32px;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.4;
  color: var(--tekst);
  transition: opacity .35s ease;
}
.js .usl:not(.otw) .usl-opis { grid-template-rows: 0fr; }
.js .usl:not(.otw) .usl-opis p { opacity: 0; }
@media (min-width: 1100px) {
  .plus { width: 44px; height: 44px; }
  .usl-btn { padding: 30px 0; }
  .usl-opis p { padding-bottom: 40px; margin-top: -6px; }
}

/* 02 i 03: zdjęcie i opis obok siebie */
.para > .g > .et { margin-bottom: 32px; }
.para-tekst h2 { max-width: 15em; }
.para-tekst p { margin-top: 24px; max-width: 60ch; }
.para-l .para-foto { margin-bottom: 40px; }
.para-p .para-foto { margin-top: 48px; }
#diagnostyka .foto img { object-position: 50% 45%; }
#estetyczna .foto img { object-position: 50% 30%; }

.tab {
  width: 100%;
  margin-top: 36px;
  border-collapse: collapse;
  border-top: 1px solid var(--linia);
  font-size: 17px;
  line-height: 1.45;
}
.tab th, .tab td {
  padding: 15px 0 14px;
  border-bottom: 1px solid var(--linia);
  text-align: left;
  vertical-align: baseline;
}
.tab th { width: 44%; padding-right: 20px; font-weight: 300; color: var(--tekst-2); }
.tab td { font-weight: 400; color: var(--tekst); font-variant-numeric: lining-nums; }

@media (min-width: 1000px) {
  .para > .g > .et { grid-row: 1; align-self: start; margin-bottom: 56px; }
  .para .para-foto, .para .para-tekst { grid-row: 2; margin: 0; }
  .para .para-tekst { display: flex; flex-direction: column; align-self: stretch; }
  .para .para-tekst .tab { margin-top: auto; }
  .para .para-tekst p { margin-top: 32px; margin-bottom: 48px; }
  .para-l .para-foto { grid-column: 1 / 6; }
  .para-l .para-tekst { grid-column: 7 / 13; }
  .para-p .para-tekst { grid-column: 1 / 7; padding-right: 24px; }
  .para-p .para-foto { grid-column: 8 / 13; }
}

/* 04 lekarze */
.lekarze { display: grid; grid-template-columns: 1fr; column-gap: 24px; }
.lekarze li { padding: 22px 0 30px; border-top: 1px solid var(--linia); }
.lekarze h3 { font-size: 26px; line-height: 1.2; }
.lekarze p { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--tekst-2); }
.lekarze .pwz {
  margin-top: 14px;
  font: 500 11px/1.5 var(--szeroki);
  font-stretch: 125%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tekst-2);
}
@media (min-width: 700px) { .lekarze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .lekarze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lekarze li { padding: 28px 24px 48px 0; }
}

/* 05 cennik */
.cennik {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--linia);
}
.cennik th, .cennik td {
  height: 84px;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--linia);
  vertical-align: baseline;
}
.cennik th { padding-right: 20px; text-align: left; font-weight: 300; }
.usl-c { display: block; font: 300 21px/1.25 var(--serif); font-optical-sizing: auto; }
.opis { display: block; margin-top: 5px; font-size: 16px; line-height: 1.45; color: var(--tekst-2); }
.cennik td {
  text-align: right;
  white-space: nowrap;
  font: 300 21px/1.25 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}
.dopisek { margin-top: 24px; font-size: 16px; line-height: 1.55; color: var(--tekst-2); }
@media (min-width: 1000px) {
  .cennik th, .cennik td { padding: 24px 0 25px; }
  .usl-c { font-size: 24px; }
  .cennik td { font-size: 26px; }
  .dopisek { margin-top: 28px; }
}

/* 06 certyfikaty */
.pieczecie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pieczecie li { display: flex; flex-direction: column; gap: 12px; }
.piecz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--tekst-2);
  font: 500 10.5px/1.7 var(--szeroki);
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.rok { font-size: 15px; line-height: 1.4; color: var(--tekst-2); text-align: center; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 600px) {
  .pieczecie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .piecz { min-height: 140px; }
}
@media (min-width: 1000px) {
  .pieczecie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .piecz { min-height: 176px; padding: 24px 26px; }
}

/* 07 kontakt: pas w kolorze wrzosu nad formularzem */
.sekcja-kontakt { background: var(--krem); padding-bottom: var(--sek); }
.kontakt-pas { background: var(--wrzos); color: var(--tekst); }
.kontakt-pas-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.kontakt-pas .et, .kontakt-pas .et .nr, .kontakt-pas h2 { color: var(--sliwka); }
.kontakt-gora { display: grid; gap: 22px; }
.kontakt-gora p:not(.et) { max-width: 52ch; font-size: 19px; }
.kontakt-gora a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.kontakt-gora a:hover { text-decoration-color: transparent; }
.strz-dol {
  flex: none;
  width: 12px;
  height: 48px;
  background: var(--sliwka);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 48'%3E%3Cpath d='M6 0v47.2M1.1 41.2 6 46.8l4.9-5.6' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 48'%3E%3Cpath d='M6 0v47.2M1.1 41.2 6 46.8l4.9-5.6' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.kontakt { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 56px; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
.pole label { display: block; margin-bottom: 4px; font-size: 15px; line-height: 1.4; color: var(--tekst-2); }
.pole input, .pole select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--tekst-2);
  border-radius: 0;
  background-color: transparent;
  font: 300 19px/1.3 var(--serif);
  color: var(--tekst);
  -webkit-appearance: none;
  appearance: none;
}
.pole select {
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1.2l6 5.6 6-5.6' fill='none' stroke='%2314080f' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
@media (hover: hover) {
  .pole input:hover, .pole select:hover { border-bottom-color: var(--tekst); }
}
.pole input:focus, .pole select:focus {
  outline: none;
  border-bottom-color: var(--sliwka);
  box-shadow: inset 0 -1px 0 var(--sliwka);
}
.pole input:user-invalid, .pole select:user-invalid { border-bottom-color: var(--blad); }
.pole input:user-invalid:focus, .pole select:user-invalid:focus { box-shadow: inset 0 -1px 0 var(--blad); }
.pole-btn { margin-top: 12px; }

.godziny-blok { margin-top: 64px; }
.godziny-blok .et { margin-bottom: 14px; }
.godziny {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--linia);
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}
.godziny th, .godziny td { padding: 14px 0 13px; border-bottom: 1px solid var(--linia); vertical-align: baseline; }
.godziny th { text-align: left; font-weight: 300; color: var(--tekst-2); padding-right: 16px; }
.godziny td { text-align: right; white-space: nowrap; font-weight: 400; }

@media (min-width: 640px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pole-btn { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .kontakt-pas-in { padding-top: 96px; padding-bottom: 96px; }
  .kontakt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 88px; }
  .form { grid-column: 1 / 8; }
  .godziny-blok { grid-column: 9 / 13; margin-top: 0; }
}

/* ---------- stopka ---------- */

.stopka { background: var(--sliwka); color: var(--krem); }
.stopka-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-top: 64px;
  padding-bottom: 64px;
  font-size: 19px;
  line-height: 1.55;
}
.marka-st { color: var(--krem); display: inline-flex; }
.stopka a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.stopka a:hover { text-decoration-color: currentColor; }
.st-a { margin-bottom: 8px; }

.dane { background: var(--bez); color: var(--tekst); padding-bottom: env(safe-area-inset-bottom); }
.dane-in {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding-top: 28px;
  padding-bottom: 32px;
  font: 400 12px/1.55 var(--urzedowy);
}
.drobny { flex-basis: 100%; max-width: 64ch; color: var(--tekst-2); }

@media (min-width: 1000px) {
  .stopka-g { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 88px; padding-bottom: 88px; }
  .st-a { grid-column: 1 / 5; margin: 0; }
  .st-b { grid-column: 6 / 9; }
  .st-c { grid-column: 9 / 13; }
  .dane-in { padding-top: 30px; padding-bottom: 34px; }
}

/* ---------- przycisk przyklejony do dołu (telefon) ---------- */

.cta-dol {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 15;
  width: 100%;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .35s var(--krzywa), visibility 0s linear .35s;
}
.cta-dol.widoczny {
  transform: none;
  visibility: visible;
  transition: transform .35s var(--krzywa), visibility 0s;
}
.cta-dol:active { transform: none; }
@media (min-width: 1100px) { .cta-dol { display: none; } }

/* ---------- ruch: wejścia ---------- */

.js [data-r] { opacity: 0; }
.js [data-r].ok { opacity: 1; }
.js .r { opacity: 0; transform: translateY(14px); }
.js .r.in {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--krzywa) var(--d, 0ms), transform .8s var(--krzywa) var(--d, 0ms);
}
.sl { display: inline-block; }

.js .foto img { clip-path: inset(100% 0 0 0); }
.js .foto.in img { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--krzywa) var(--d, 0ms); }
.js .hero-foto img { transform: scale(1.06); }
.js .hero-foto.in img { transform: none; transition: clip-path 1.2s var(--krzywa) var(--d, 0ms), transform 1.2s var(--krzywa) var(--d, 0ms); }

.js .pasek i { transform: scaleX(0); }
.js .pasek.in i { transform: none; transition: transform .5s var(--krzywa); }
.js .pasek.in i:nth-child(2) { transition-delay: 90ms; }
.js .pasek.in i:nth-child(3) { transition-delay: 180ms; }
.js .pasek.in i:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .js [data-r], .js .r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .foto img, .js .hero-foto img { clip-path: none !important; transform: none !important; transition: none !important; }
  .js .pasek i { transform: none !important; transition: none !important; }
  .menu-tlo, .menu-panel, .cta-dol, .nav::after, .btn::before, .strz, .usl, .usl-opis, .usl-opis p, .plus::after { transition: none !important; }
}