/* Trando Clean — arkusz stylów.
   Paleta oparta na wodzie (głęboka morska zieleń) z ciepłym akcentem,
   duża typografia i wysoki kontrast — strona ma być czytelna także
   dla osób starszych i na słabszych ekranach. */

:root {
  --atrament: #0C2F38;
  --morski: #14606E;
  --morski-jasny: #1E7C8C;
  --bursztyn: #E9A227;
  --bursztyn-ciemny: #A9720F;
  --papier: #F2F5F5;
  --papier-cieply: #E7EDED;
  --bialy: #ffffff;
  --przygasly: #4F676F;
  --linia: #D5DFE0;

  --szer: 1140px;
  --promien: 10px;
  --cien: 0 2px 4px rgba(12, 47, 56, .06), 0 12px 28px rgba(12, 47, 56, .07);

  --naglowki: "Archivo", "Segoe UI", system-ui, sans-serif;
  --tekst: "Source Serif 4", Georgia, "Times New Roman", serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bialy);
  color: var(--atrament);
  font-family: var(--tekst);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .marka__tekst strong, .przycisk, th, summary, cite, .proces__numer {
  font-family: var(--naglowki);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0 0 .5em; }
h3 { font-size: 1.24rem; margin: 0 0 .4em; }
p  { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--morski); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--atrament); }
:focus-visible { outline: 3px solid var(--bursztyn); outline-offset: 2px; border-radius: 3px; }

img { max-width: 100%; height: auto; display: block; }

.obszar { width: min(100% - 2.5rem, var(--szer)); margin-inline: auto; }
.srodek { text-align: center; }
.drobne { font-size: .95rem; color: var(--przygasly); }
.lead { font-size: 1.22rem; color: var(--przygasly); max-width: 62ch; }

.tylko-czytnik, .pulapka {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pomin {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--atrament); color: #fff; padding: .8rem 1.2rem;
}
.pomin:focus { left: .5rem; top: .5rem; }

.ikona { width: 1.4em; height: 1.4em; flex: none; }

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

.przycisk {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.35rem; border-radius: var(--promien);
  font-size: 1.02rem; text-decoration: none; border: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.przycisk--glowny { background: var(--bursztyn); color: var(--atrament); border-color: var(--bursztyn); }
.przycisk--glowny:hover { background: #f5b13c; border-color: #f5b13c; color: var(--atrament); }
.przycisk--drugi { border-color: var(--linia); color: var(--atrament); background: var(--bialy); }
.przycisk--drugi:hover { border-color: var(--morski); color: var(--morski); }
.przycisk--duzy { padding: 1rem 1.7rem; font-size: 1.08rem; }
.sekcja--ciemna .przycisk--drugi, .wezwanie .przycisk--drugi {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.4);
}
.sekcja--ciemna .przycisk--drugi:hover, .wezwanie .przycisk--drugi:hover { border-color: #fff; color: #fff; }

.link-dalej {
  font-family: var(--naglowki); font-weight: 600; font-size: 1rem;
  text-decoration: none; border-bottom: 2px solid var(--bursztyn); padding-bottom: 2px;
}
.link-dalej:hover { border-color: var(--morski); }

/* ---------- nagłówek ---------- */

.szczyt {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linia);
}
.szczyt__srodek { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

.marka { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; }
.marka__znak { width: 40px; height: 40px; }
.marka__tekst { display: flex; flex-direction: column; line-height: 1.2; }
.marka__tekst strong { font-size: 1.2rem; letter-spacing: -.02em; }
.marka__tekst span { font-size: .82rem; color: var(--przygasly); font-family: var(--naglowki); font-weight: 500; }

.nawigacja { display: flex; align-items: center; gap: 1.6rem; }
.nawigacja ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nawigacja a {
  font-family: var(--naglowki); font-weight: 500; font-size: 1rem;
  text-decoration: none; color: var(--atrament); padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nawigacja a:hover { border-color: var(--linia); }
.nawigacja a[aria-current="page"] { border-color: var(--bursztyn); }
/* selektor musi być bardziej szczegółowy niż .nawigacja a, inaczej kolor tekstu przegrywa */
.nawigacja .przycisk--tel {
  background: var(--bursztyn); border-color: var(--bursztyn); color: var(--atrament);
  padding: .62rem 1.05rem; font-size: 1rem; font-weight: 700; white-space: nowrap;
}
.nawigacja .przycisk--tel:hover { background: #f5b13c; border-color: #f5b13c; color: var(--atrament); }

.hamburger { display: none; }

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

.hero { background: linear-gradient(180deg, var(--papier) 0%, var(--bialy) 100%); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero__siatka { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__nadpis {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--naglowki); font-weight: 600; font-size: .95rem;
  color: var(--morski); background: var(--papier-cieply);
  padding: .4rem .9rem; border-radius: 99px; margin-bottom: 1.2rem;
}
.hero h1 { max-width: 15ch; }
.hero__lead { font-size: 1.16rem; color: var(--przygasly); max-width: 54ch; }
.hero__akcje { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.2rem; }
.hero__drobne { display: flex; align-items: center; gap: .5rem; font-size: .98rem; color: var(--przygasly); margin: 0; }

/* porównanie przed/po */
.porownanie {
  position: relative; border-radius: var(--promien); overflow: hidden;
  box-shadow: var(--cien); aspect-ratio: 4 / 3; background: var(--papier-cieply);
  isolation: isolate;
}
.porownanie img { width: 100%; height: 100%; object-fit: cover; }
.porownanie__wierzch { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.porownanie__wierzch img { max-width: none; height: 100%; object-fit: cover; }
.porownanie__uchwyt {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; transform: translateX(-50%); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(12,47,56,.15);
}
.porownanie__uchwyt::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: var(--cien);
}
.porownanie__suwak {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: none;
}
.porownanie__suwak:focus-visible + .porownanie__uchwyt { box-shadow: 0 0 0 3px var(--bursztyn); }
.porownanie__etykieta {
  position: absolute; bottom: .8rem; font-family: var(--naglowki); font-weight: 600;
  font-size: .82rem; padding: .3rem .7rem; border-radius: 6px;
  background: rgba(12,47,56,.82); color: #fff; pointer-events: none;
}
.porownanie__etykieta--l { left: .8rem; }
.porownanie__etykieta--p { right: .8rem; }
.porownanie__podpis { text-align: center; font-size: .92rem; color: var(--przygasly); margin: .8rem 0 0; }

/* ---------- atuty ---------- */

.atuty { border-block: 1px solid var(--linia); background: var(--bialy); }
.atuty__siatka { display: grid; grid-template-columns: repeat(3, 1fr); }
.atut { padding: 2rem 1.8rem 2rem 0; }
.atut + .atut { border-left: 1px solid var(--linia); padding-left: 1.8rem; }
.atut .ikona { color: var(--morski); width: 1.9rem; height: 1.9rem; margin-bottom: .7rem; }
.atut h2 { font-size: 1.12rem; }
.atut p { font-size: 1rem; color: var(--przygasly); margin: 0; }

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

.sekcja { padding: clamp(3rem, 6vw, 5rem) 0; }
.sekcja--jasna { background: var(--papier); }
.sekcja--ciemna { background: var(--atrament); color: #fff; }
.sekcja--ciemna h2 { color: #fff; }
.sekcja--ciemna p { color: rgba(255,255,255,.82); }

.sekcja__glowa { max-width: 60ch; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.sekcja__glowa p { color: var(--przygasly); font-size: 1.1rem; margin: 0 auto; }
.sekcja__glowa--lewa { margin-inline: 0; text-align: left; }

.naglowek-strony { background: var(--papier); padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linia); }
.okruszki { font-size: .92rem; color: var(--przygasly); margin-bottom: 1rem; }
.okruszki a { color: var(--przygasly); }
.okruszki span[aria-hidden] { margin: 0 .4rem; }

/* karty usług */
.uslugi-karty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.usluga-karta {
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--promien);
  padding: 2rem; display: flex; flex-direction: column;
}
.usluga-karta .ikona { color: var(--morski); width: 2.2rem; height: 2.2rem; margin-bottom: .9rem; }
.usluga-karta p { color: var(--przygasly); font-size: 1.03rem; }
.usluga-karta__lista { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 1rem; }
.usluga-karta__lista li { padding-left: 1.5rem; position: relative; margin-bottom: .35rem; }
.usluga-karta__lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bursztyn);
}
.usluga-karta .link-dalej { margin-top: auto; align-self: flex-start; }

/* lista usług na podstronie */
.uslugi-lista { display: grid; gap: 2rem; }
.usluga { border: 1px solid var(--linia); border-radius: var(--promien); padding: clamp(1.5rem, 3vw, 2.5rem); }
.usluga__glowa { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 1.2rem; }
.usluga__glowa .ikona { color: var(--morski); width: 2.4rem; height: 2.4rem; margin-top: .2rem; }
.usluga__skrot { color: var(--przygasly); font-size: 1.08rem; margin: 0; }
.usluga__opis p { font-size: 1.06rem; }

.rozwijane { border-top: 1px solid var(--linia); margin-top: 1.5rem; }
.rozwijane summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; font-size: 1.08rem; list-style: none;
}
.rozwijane summary::-webkit-details-marker { display: none; }
.rozwijane__strzalka { width: 1.3rem; height: 1.3rem; color: var(--morski); transition: transform .2s ease; flex: none; }
.rozwijane[open] .rozwijane__strzalka { transform: rotate(180deg); }
.zakres { columns: 2; column-gap: 2.5rem; list-style: none; padding: 0; margin: 0 0 .8rem; }
.zakres li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; break-inside: avoid; font-size: 1.02rem; }
.zakres li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: .75rem; height: .4rem;
  border-left: 2px solid var(--bursztyn); border-bottom: 2px solid var(--bursztyn);
  transform: rotate(-45deg);
}

/* proces */
.proces__uklad { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.proces { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; }
.proces li { display: grid; grid-template-columns: 2.9rem 1fr; column-gap: 1.1rem; }
.proces__numer {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  grid-row: 1 / span 2;   /* kółko obejmuje tytuł i opis, więc opis nie odjeżdża w dół */
  border-radius: 50%; background: var(--papier-cieply); color: var(--morski); font-size: 1.12rem;
}
/* tytuł dostaje wysokość kółka i jest w nim wyśrodkowany - dzięki temu licuje z cyfrą */
.proces h3 {
  grid-column: 2; display: flex; align-items: center;
  min-height: 2.9rem; margin: 0 0 .3rem;
}
.proces p { grid-column: 2; margin: 0; color: var(--przygasly); font-size: 1.03rem; }

/* obszar działania */
.obszar__uklad { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.miasta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.miasta li {
  font-family: var(--naglowki); font-weight: 500; font-size: 1rem;
  border: 1px solid rgba(255,255,255,.28); border-radius: 99px; padding: .5rem 1.1rem;
}

/* galeria */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.galeria--pelna { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kafelek { margin: 0; }
.kafelek__przycisk {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--promien); overflow: hidden;
}
.kafelek img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--promien); }
.kafelek figcaption { font-size: .95rem; color: var(--przygasly); margin-top: .5rem; }
.galeria + .srodek { margin-top: 2.5rem; }

/* powiększenie zdjęcia */
.powiekszenie {
  position: fixed; inset: 0; z-index: 60; background: rgba(12,47,56,.94);
  display: grid; place-items: center; padding: 1.5rem;
}
.powiekszenie[hidden] { display: none; }
.powiekszenie figure { margin: 0; max-width: min(1100px, 100%); }
.powiekszenie img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: var(--promien); }
.powiekszenie figcaption { color: #fff; text-align: center; margin-top: 1rem; font-size: 1rem; }
.powiekszenie__zamknij {
  position: absolute; top: 1rem; right: 1.2rem; font-size: 2.6rem; line-height: 1;
  background: none; border: 0; color: #fff; cursor: pointer; padding: .3rem .8rem;
}

/* opinie */
.opinie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.opinia {
  margin: 0; padding: 1.8rem; background: var(--papier); border-radius: var(--promien);
  border-left: 4px solid var(--bursztyn);
}
.opinia p { font-size: 1.05rem; margin-bottom: 1rem; }
.opinia cite { font-style: normal; font-size: .96rem; color: var(--przygasly); }

/* cennik */
.cennik { display: grid; gap: 3rem; }
.cennik__grupa h2 { margin-bottom: 1rem; }
.tabela-cen { width: 100%; border-collapse: collapse; }
.tabela-cen thead th {
  text-align: left; font-size: .88rem; letter-spacing: .04em; color: var(--przygasly);
  border-bottom: 2px solid var(--atrament); padding: 0 0 .7rem; font-weight: 600;
}
.tabela-cen thead th:last-child, .tabela-cen td { text-align: right; }
.tabela-cen tbody th {
  text-align: left; font-family: var(--tekst); font-weight: 400; font-size: 1.06rem;
  padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--linia);
}
.tabela-cen td {
  font-family: var(--naglowki); font-weight: 600; font-size: 1.06rem;
  padding: .95rem 0; border-bottom: 1px solid var(--linia); white-space: nowrap;
}
.tabela-cen tbody tr:hover th, .tabela-cen tbody tr:hover td { background: var(--papier); }
.uwagi { background: var(--papier); border-radius: var(--promien); padding: clamp(1.5rem, 3vw, 2.2rem); }
.uwagi h2 { font-size: 1.3rem; }
.uwagi ul { margin: 0; padding-left: 1.3rem; }
.uwagi li { margin-bottom: .6rem; font-size: 1.03rem; }

/* kontakt */
.kontakt__uklad { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dane-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.dane-lista li { display: flex; align-items: center; gap: .8rem; font-size: 1.08rem; }
.dane-lista .ikona { color: var(--morski); }

.formularz { display: grid; gap: 1.2rem; max-width: 620px; }
.pole { display: grid; gap: .4rem; }
.pole label { font-family: var(--naglowki); font-weight: 600; font-size: .98rem; }
.opcjonalne { font-weight: 500; color: var(--przygasly); }
.pole input, .pole select, .pole textarea {
  font-family: var(--tekst); font-size: 1.05rem; padding: .8rem .95rem;
  border: 2px solid var(--linia); border-radius: var(--promien);
  background: var(--bialy); color: var(--atrament); width: 100%;
}
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--morski); outline: none; }
.pole textarea { resize: vertical; min-height: 140px; }
.pole--zgoda { grid-template-columns: auto 1fr; align-items: start; gap: .8rem; }
.pole--zgoda input { width: 1.35rem; height: 1.35rem; margin-top: .25rem; accent-color: var(--morski); }
.pole--zgoda label { font-family: var(--tekst); font-weight: 400; font-size: .98rem; color: var(--przygasly); }
.formularz .przycisk { justify-self: start; }
.blad-pola { border-color: #b3261e !important; }
.komunikat { padding: 1rem 1.2rem; border-radius: var(--promien); font-size: 1rem; }
.komunikat--blad { background: #fdeceb; border-left: 4px solid #b3261e; }

/* wezwanie do kontaktu */
.wezwanie { background: var(--morski); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.wezwanie__srodek { text-align: center; }
.wezwanie h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.wezwanie p { color: rgba(255,255,255,.85); margin-inline: auto; }
.wezwanie__akcje { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.8rem; }

.pusto { text-align: center; padding: clamp(2rem, 5vw, 4rem) 0; }
.pusto p { margin-inline: auto; }
.pusto .przycisk { margin-top: .5rem; }

.tekst h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.tekst h2:first-child { margin-top: 0; }

/* stopka */
.stopka { background: var(--atrament); color: rgba(255,255,255,.78); padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem; font-size: 1rem; }
.stopka__siatka { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.stopka h2 { font-size: 1rem; color: #fff; margin-bottom: .9rem; }
.stopka__nazwa { font-family: var(--naglowki); font-weight: 700; font-size: 1.25rem; color: #fff; margin-bottom: .4rem; }
.stopka__opis { margin-bottom: .5rem; }
.stopka__drobne { font-size: .9rem; color: rgba(255,255,255,.55); }
.stopka__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.stopka a { color: rgba(255,255,255,.85); text-decoration: none; }
.stopka a:hover { color: #fff; text-decoration: underline; }
.stopka__dol {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.3rem;
  font-size: .9rem; color: rgba(255,255,255,.55);
}
.stopka__dol p { margin: 0; }

/* pasek z telefonem na telefonie */
.pasek-tel { display: none; }

/* WhatsApp - stały przycisk w rogu ekranu */
.whatsapp {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 44;
  display: inline-flex; align-items: center; gap: .6rem;
  background: #0F7A6D; color: #fff; text-decoration: none;
  padding: .8rem 1.15rem; border-radius: 99px;
  font-family: var(--naglowki); font-weight: 600; font-size: 1rem;
  box-shadow: 0 4px 18px rgba(12, 47, 56, .28);
  transition: background-color .15s ease;
}
.whatsapp:hover { background: #0B6A5D; color: #fff; }
.whatsapp .ikona { width: 1.5rem; height: 1.5rem; }

/* ---------- układy mniejsze ---------- */

@media (max-width: 960px) {
  .hero__siatka, .proces__uklad, .obszar__uklad, .kontakt__uklad { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
  .uslugi-karty, .opinie, .galeria { grid-template-columns: repeat(2, 1fr); }
  .atuty__siatka { grid-template-columns: 1fr; }
  .atut { padding: 1.5rem 0; border-top: 1px solid var(--linia); }
  .atut:first-child { border-top: 0; }
  .atut + .atut { border-left: 0; padding-left: 0; }
  .stopka__siatka { grid-template-columns: 1fr 1fr; }

  .hamburger {
    display: inline-flex; align-items: center; gap: .55rem;
    background: none; border: 2px solid var(--linia); border-radius: var(--promien);
    padding: .6rem .9rem; cursor: pointer; font-family: var(--naglowki);
    font-weight: 600; font-size: .95rem; color: var(--atrament);
  }
  .hamburger__kreski, .hamburger__kreski::before, .hamburger__kreski::after {
    display: block; width: 20px; height: 2px; background: var(--atrament); content: "";
  }
  .hamburger__kreski { position: relative; }
  .hamburger__kreski::before { position: absolute; top: -6px; }
  .hamburger__kreski::after { position: absolute; top: 6px; }

  .nawigacja {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bialy); border-bottom: 1px solid var(--linia); padding: .5rem 1.25rem 1.25rem;
    box-shadow: var(--cien);
  }
  .nawigacja.otwarte { display: flex; }
  .nawigacja ul { flex-direction: column; gap: 0; }
  .nawigacja li { border-bottom: 1px solid var(--linia); }
  .nawigacja a { display: block; padding: .95rem 0; font-size: 1.08rem; border: 0; }
  .nawigacja a[aria-current="page"] { color: var(--morski); }
  .przycisk--tel { margin-top: 1rem; justify-content: center; }
  .szczyt__srodek { position: relative; }

  /* na telefonie zwijamy do samej ikony i podnosimy nad pasek z numerem */
  .whatsapp { bottom: 4.7rem; right: .9rem; padding: .85rem; }
  .whatsapp span { display: none; }

  .pasek-tel {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    align-items: center; justify-content: center; gap: .6rem;
    background: var(--bursztyn); color: var(--atrament); text-decoration: none;
    font-family: var(--naglowki); font-weight: 700; font-size: 1.06rem; padding: .95rem;
    box-shadow: 0 -2px 14px rgba(12,47,56,.18);
  }
  body { padding-bottom: 3.6rem; }
}

@media (max-width: 640px) {
  body { font-size: 1.06rem; }
  .uslugi-karty, .opinie, .galeria, .zakres { grid-template-columns: 1fr; columns: 1; }
  .stopka__siatka { grid-template-columns: 1fr; gap: 1.8rem; }
  .przycisk, .wezwanie__akcje .przycisk { justify-content: center; width: 100%; }
  .hero__akcje { flex-direction: column; align-items: stretch; }
  .marka__tekst span { display: none; }
  .tabela-cen tbody th { font-size: 1rem; padding-right: .5rem; }
}

@media print {
  .szczyt, .pasek-tel, .wezwanie, .powiekszenie { display: none; }
  body { font-size: 11pt; }
}