/* =========================================================================
   Skóra: Bartosz Strzelecki Fizjoterapia
   Kierunek: jasny, kliniczny, ale ciepły. Morska głębia na kotwice zaufania,
   mięta na akcje. Zdjęcie pracy dłoni zamiast stockowego uśmiechu - w tej
   niszy dowodem jest efekt u pacjenta, nie sprzęt.
   Mobile-first: wszystko poniżej liczone od 360 px w górę.
   ========================================================================= */

:root {
  --morska: var(--color-primary);
  --mieta: var(--color-accent);
  --tlo-mgla: #F3F7F7;
  --cien-karta: 0 1px 2px rgba(18, 59, 71, .06), 0 12px 28px rgba(18, 59, 71, .07);
  --cien-mocny: 0 18px 44px rgba(18, 59, 71, .16);
  --pas: clamp(20px, 5vw, 40px);
}

body {
  background: var(--color-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: var(--lh-body);
}

.container { width: min(1180px, 100% - 2 * var(--pas)); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.02em; line-height: 1.12; }

.section { padding-block: clamp(48px, 8vw, 96px); }
.section:nth-of-type(even) { background: var(--tlo-mgla); }

.sec-head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 40px); }
.sec-head h2 { font-size: clamp(1.65rem, 5.4vw, 2.5rem); color: var(--morska); margin-block: 10px 12px; }
.sec-head .muted { color: var(--text-muted); font-size: clamp(.95rem, 2.6vw, 1.05rem); }
.sec-head--left { margin-inline: 0; }

.eyebrow {
  display: inline-block;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--mieta);
}
.eyebrow--ruled::after {
  content: ""; display: block; width: 44px; height: 2px;
  margin-top: 8px; background: var(--mieta);
}

/* --------------------------------------------------------------- NAGŁÓWEK */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.header-in { display: flex; align-items: center; gap: 16px; min-height: 68px; }

.marka { display: grid; gap: 1px; text-decoration: none; margin-right: auto; }
.marka-imie {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(15px, 4vw, 18px); color: var(--morska); letter-spacing: -.01em;
}
.marka-rola {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mieta); font-weight: 600;
}

.site-header nav { display: none; align-items: center; gap: 20px; }
.site-header nav > a {
  color: var(--morska); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.site-header nav > a:hover { border-bottom-color: var(--mieta); }

.nav-social { display: inline-flex; gap: 6px; margin-left: 4px; }
.ikona-social {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--morska); border: 1px solid var(--color-border);
  transition: background .2s, color .2s, border-color .2s;
}
.ikona-social svg { width: 18px; height: 18px; }
.ikona-social:hover { background: var(--mieta); border-color: var(--mieta); color: #fff; }

.nav-tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--morska); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14.5px; white-space: nowrap;
  transition: background .2s, transform .15s;
}
.nav-tel svg { width: 16px; height: 16px; }
.nav-tel:hover { background: var(--color-primary600); }
.nav-tel:active { transform: scale(.97); }

/* Hamburger: na telefonie jedyny sposób na menu, więc ma pełne pole dotyku */
.nav-toggle {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-right: -8px;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: #fff; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--morska); border-radius: 2px; transition: transform .25s, opacity .2s;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

.site-header nav.open {
  display: grid; gap: 4px;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 12px var(--pas) 20px;
  background: #fff; border-bottom: 1px solid var(--color-border);
  box-shadow: var(--cien-mocny);
}
.site-header nav.open > a { min-height: 48px; display: flex; align-items: center; }
.site-header nav.open .nav-social { margin: 8px 0 4px; }
.site-header nav.open .nav-tel { justify-content: center; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-header nav { display: flex; }
}

/* ------------------------------------------------------------------ HERO */

.hero {
  position: relative; isolation: isolate;
  min-height: clamp(460px, 78svh, 640px);
  display: flex; align-items: flex-end;
  padding-block: clamp(40px, 10vw, 90px);
  overflow: hidden;
}
.hero-foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(9, 32, 39, .55) 0%, rgba(9, 32, 39, .38) 40%, rgba(9, 32, 39, .88) 100%),
    linear-gradient(90deg, rgba(9, 32, 39, .85) 0%, rgba(9, 32, 39, .25) 65%);
}
.hero-in { position: relative; max-width: 640px; }
.hero h1 {
  margin: 14px 0 16px;
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  color: #fff; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: #7FE3CB; }
.hero .eyebrow { color: #9FEAD6; }
.hero .eyebrow--ruled::after { background: #9FEAD6; }
.hero-lead {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 3.4vw, 1.15rem); line-height: 1.6;
  max-width: 46ch; text-wrap: pretty;
}
.hero-cta { margin-top: 26px; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15.5px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--mieta); color: #06231D; box-shadow: 0 10px 26px rgba(31, 168, 140, .35); }
.btn-primary:hover { background: var(--color-accentHover); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: #fff; color: var(--morska); }

/* Poza hero duch przycisku musi mieć kontrast na białym */
.section .btn-ghost { background: #fff; color: var(--morska); border-color: var(--color-border); }
.section .btn-ghost:hover { border-color: var(--mieta); color: var(--mieta); }

/* ------------------------------------------------------------ PASEK ZAUFANIA */

.trust { background: var(--morska); color: #fff; }
.trust-in {
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  padding-block: 16px;
  font-size: 14px;
}
.trust-in span { display: inline-flex; align-items: baseline; gap: 7px; color: rgba(255, 255, 255, .82); }
.trust-in b { font-family: var(--font-heading); font-size: 19px; color: #7FE3CB; }

/* -------------------------------------------------------------- DOLEGLIWOŚCI */

.dolegliwosci {
  list-style: none; padding: 0; margin: 0 0 clamp(28px, 5vw, 44px);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.dolegliwosci li {
  padding: 9px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--color-border);
  font-size: 14px; color: var(--morska); font-weight: 500;
}
.section:nth-of-type(even) .dolegliwosci li { background: #fff; }

/* ------------------------------------------------------------------ USŁUGI */

.grid { display: grid; gap: 16px; }
.uslugi-grid { grid-template-columns: 1fr; }
@media (min-width: 760px) { .uslugi-grid { grid-template-columns: 1fr 1fr; } }

.offer-card {
  position: relative;
  padding: clamp(22px, 4vw, 30px);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; box-shadow: var(--cien-karta);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.offer-card:hover { transform: translateY(-3px); box-shadow: var(--cien-mocny); border-color: rgba(31, 168, 140, .5); }
.offer-card.flip { background: linear-gradient(180deg, #fff, var(--tlo-mgla)); }
.offer-nr {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--mieta);
}
.offer-card h3 { font-size: clamp(1.15rem, 3.6vw, 1.4rem); color: var(--morska); margin-bottom: 10px; }
.offer-card p { color: var(--text-muted); font-size: 15px; }

.link-card {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; min-height: 44px;
  color: var(--mieta); font-weight: 600; font-size: 14.5px; text-decoration: none;
}
.link-card::after { content: "→"; transition: transform .2s; }
.link-card:hover::after { transform: translateX(4px); }

/* ----------------------------------------------------------------- O MNIE */

.o-mnie-grid { display: grid; gap: clamp(24px, 5vw, 48px); align-items: start; }
@media (min-width: 900px) { .o-mnie-grid { grid-template-columns: 0.85fr 1.15fr; } }

.media-frame {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: 20px; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(18, 59, 71, .04) 0 12px, transparent 12px 24px),
    var(--tlo-mgla);
  border: 1px dashed rgba(18, 59, 71, .28);
}
.media-frame-opis {
  font-size: 13px; letter-spacing: .06em; color: rgba(18, 59, 71, .55); text-align: center; padding: 0 18px;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

.o-mnie-tresc .lead {
  font-size: clamp(1.05rem, 3.2vw, 1.25rem); color: var(--morska);
  font-weight: 500; margin-bottom: 14px;
}
.o-mnie-tresc p { margin-bottom: 14px; color: var(--text-muted); }

.zasady { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 12px; }
.zasady li {
  position: relative; padding-left: 30px;
  font-size: 15px; color: var(--text-muted); line-height: 1.55;
}
.zasady li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(31, 168, 140, .16);
  box-shadow: inset 0 0 0 2px var(--mieta);
}
.zasady b { color: var(--morska); }

/* ---------------------------------------------------------------- PROCES */

.proces-lista {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
  counter-reset: krok;
}
@media (min-width: 700px)  { .proces-lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .proces-lista { grid-template-columns: repeat(4, 1fr); } }

.proces-krok {
  position: relative;
  padding: clamp(20px, 3.6vw, 26px);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; box-shadow: var(--cien-karta);
}
.proces-nr {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  border-radius: 12px; background: var(--morska); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
}
.proces-krok h3 { font-size: 1.1rem; color: var(--morska); margin-bottom: 8px; }
.proces-krok p { font-size: 14.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------- OPINIE */

.reviews-google { display: inline-flex; align-items: center; gap: 8px; }
.reviews-google b { font-family: var(--font-heading); font-size: 20px; color: var(--morska); }
.stars { color: #F5A524; letter-spacing: 2px; }

.opinie-grid { grid-template-columns: 1fr; }
@media (min-width: 700px)  { .opinie-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .opinie-grid { grid-template-columns: repeat(3, 1fr); } }

.opinia {
  position: relative; margin: 0;
  padding: clamp(22px, 4vw, 28px);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; box-shadow: var(--cien-karta);
}
.opinia::before {
  content: "\201E";
  position: absolute; top: 4px; left: 18px;
  font-family: var(--font-heading); font-size: 60px; line-height: 1;
  color: rgba(31, 168, 140, .22);
}
.opinia p { position: relative; font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.opinia footer {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.opinia footer b { color: var(--morska); font-size: 14.5px; }
.opinia footer span { font-size: 12.5px; color: var(--text-muted); }

.opinie-cta { margin-top: 22px; }

/* --------------------------------------------------------------- KONTAKT */

.kontakt-grid { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; }
@media (min-width: 900px) { .kontakt-grid { grid-template-columns: 1fr 1fr; } }

.kontakt-dane { display: grid; gap: 10px; }

.kontakt-poz {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 16px; text-decoration: none; color: inherit;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.kontakt-poz:hover { border-color: var(--mieta); box-shadow: var(--cien-karta); }
.kontakt-poz:active { transform: scale(.99); }
.kontakt-poz--statyczny:hover { border-color: var(--color-border); box-shadow: none; }

.kontakt-ikona {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(31, 168, 140, .12); color: var(--morska);
}
.kontakt-ikona svg { width: 20px; height: 20px; }
.kontakt-poz b { display: block; color: var(--morska); font-size: 15.5px; }
.kontakt-poz small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }

.kontakt-social { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.kontakt-social .btn { flex: 1 1 auto; min-height: 48px; }

.dojazd {
  margin-top: 8px; padding: 16px;
  border-radius: 16px; background: var(--tlo-mgla);
  border: 1px solid var(--color-border);
  font-size: 14px;
}
.dojazd b { color: var(--morska); }
.dojazd p { margin-top: 6px; color: var(--text-muted); line-height: 1.7; }

/* Formularz: start od tego, co naprawdę potrzebne */
.kontakt-form {
  padding: clamp(22px, 4vw, 30px);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 20px; box-shadow: var(--cien-karta);
  display: grid; gap: 14px;
}
.form-tytul {
  font-family: var(--font-heading); font-size: 1.25rem;
  color: var(--morska); margin-bottom: 2px;
}
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--morska); }
.field small { font-weight: 400; color: var(--text-muted); }
.field input, .field textarea {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 16px;          /* 16 px: iOS nie przybliża widoku */
  color: var(--text-body);
  background: var(--tlo-mgla);
  border: 1px solid var(--color-border); border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--mieta); box-shadow: 0 0 0 3px rgba(31, 168, 140, .18);
}
.field textarea { resize: vertical; min-height: 88px; }
.form-wyslij { width: 100%; }
.hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.mapa { margin-top: clamp(28px, 5vw, 44px); }
.mapa iframe {
  width: 100%; max-width: 100%; height: clamp(240px, 42vw, 360px);
  border: 1px solid var(--color-border); border-radius: 20px; display: block;
  filter: saturate(.9);
}
.mapa-podpis { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
.mapa-podpis b { color: var(--morska); }

/* Placeholder danych, których klient jeszcze nie podał */
.ph {
  display: inline-block;
  padding: 1px 7px; border-radius: 6px;
  background: rgba(217, 135, 11, .18);
  color: #6B4504; font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}

/* --------------------------------------------------------- STICKY MOBILE */

.mobile-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 20px; border-radius: 999px;
  background: var(--mieta); color: #06231D;
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  box-shadow: 0 12px 30px rgba(31, 168, 140, .42);
  opacity: 0; transform: translateY(120%);
  transition: opacity .3s, transform .3s;
}
.mobile-cta svg { width: 18px; height: 18px; }
.mobile-cta.show { opacity: 1; transform: none; }
@media (max-width: 899px) { .mobile-cta { display: inline-flex; } }

/* ---------------------------------------------------------------- STOPKA */

.site-footer {
  background: var(--morska); color: rgba(255, 255, 255, .8);
  padding-block: clamp(36px, 6vw, 56px);
  margin-bottom: 78px;                     /* miejsce na przyklejone CTA */
}
@media (min-width: 900px) { .site-footer { margin-bottom: 0; } }

.footer-in { display: grid; gap: 26px; }
@media (min-width: 800px) { .footer-in { grid-template-columns: 1.4fr 1fr auto; align-items: start; } }

.footer-nap p { font-size: 14px; line-height: 1.8; }
.footer-nap strong { color: #fff; font-family: var(--font-heading); font-size: 17px; }
.footer-nap a { color: #7FE3CB; text-decoration: none; }
.footer-nap a:hover { text-decoration: underline; }

.footer-nav { display: grid; gap: 6px; align-content: start; }
.footer-nav a {
  color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 14px;
  min-height: 32px; display: inline-flex; align-items: center;
}
.footer-nav a:hover { color: #fff; }

.footer-social { display: flex; gap: 8px; }
.footer-social .ikona-social { color: #fff; border-color: rgba(255, 255, 255, .3); }
.footer-social .ikona-social:hover { background: #fff; color: var(--morska); border-color: #fff; }

/* ------------------------------------------------------------------ RUCH */

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

/* ------------------------------------------------ wyrównanie i cele dotyku */

/* Bazowy arkusz centruje sekcje. Tu treść czyta się jak wizytówka:
   wszystko od lewej krawędzi, jedna oś wzroku od góry do CTA. */
.hero-in, .sec-head, .sec-head .muted, .hero-lead, .trust-in { text-align: left; }
.hero-cta { justify-content: flex-start; }
.sec-head { margin-inline: 0; }

/* Nic klikalnego poniżej 44 px - kciuk nie trafia w 19-pikselowy link */
.ikona-social { width: 44px; height: 44px; }
.footer-nav a, .footer-nap a { min-height: 44px; display: inline-flex; align-items: center; }
.marka { min-height: 46px; align-content: center; }
.opinie-cta .link-card { min-height: 44px; }

/* ========================================================== PODSTRONY == */

.podstrona-hero {
  padding-block: clamp(34px, 7vw, 64px) clamp(24px, 5vw, 44px);
  background: linear-gradient(180deg, var(--tlo-mgla), #fff);
  border-bottom: 1px solid var(--color-border);
}
.podstrona-hero h1 {
  margin: 14px 0 12px;
  font-size: clamp(1.9rem, 7.4vw, 3rem);
  color: var(--morska); text-wrap: balance;
}
.podstrona-hero h1 em { font-style: normal; color: var(--mieta); }
.podstrona-lead {
  max-width: 56ch; font-size: clamp(1rem, 3.2vw, 1.12rem);
  color: var(--text-muted); line-height: 1.65;
}

.container.waska { width: min(760px, 100% - 2 * var(--pas)); }
.container.waska h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--morska); margin-bottom: 14px; }
.container.waska h2 + p, .container.waska p + p { margin-bottom: 14px; color: var(--text-muted); }

/* Lista wskazań: znaczniki zamiast kropek, żeby czytało się jak checklista */
.lista-znaczniki { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
@media (min-width: 700px) { .lista-znaczniki { grid-template-columns: 1fr 1fr; } }
.lista-znaczniki li {
  position: relative; padding: 12px 16px 12px 44px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  font-size: 15px; color: var(--text-muted);
}
.lista-znaczniki li::before {
  content: "✓"; position: absolute; left: 15px; top: 11px;
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(31, 168, 140, .16);
  color: var(--mieta); font-size: 12px; font-weight: 700;
}

.cennik-nota {
  margin-top: 18px; padding: 16px 18px;
  background: var(--tlo-mgla); border: 1px solid var(--color-border);
  border-left: 3px solid var(--warning); border-radius: 0 14px 14px 0;
  font-size: 14.5px; color: var(--text-muted); line-height: 1.6;
}
.cennik-nota b { display: block; color: var(--morska); margin-bottom: 4px; }
.cennik-nota .ph { margin: 0 0 6px; }

.inne-uslugi { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.inne-uslugi b { display: block; margin-bottom: 6px; color: var(--morska); font-size: 14px; }
.inne-uslugi .link-card { margin-right: 18px; margin-top: 4px; }

/* Pas CTA zamykający podstronę */
.pas-cta { background: var(--morska) !important; color: #fff; }
.pas-cta h2 { color: #fff; font-size: clamp(1.4rem, 4.6vw, 2rem); margin-bottom: 8px; }
.pas-cta .muted { color: rgba(255, 255, 255, .78); }
.pas-cta-in { display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .pas-cta-in { grid-template-columns: 1.4fr auto; } }
.pas-cta .cluster { display: flex; gap: 10px; flex-wrap: wrap; }
.pas-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.pas-cta .btn-ghost:hover { background: #fff; color: var(--morska); }

/* Opinia pojedyncza w tekście */
.opinia--solo { margin: 22px 0; }

/* Oceny na podstronie opinii */
.oceny { display: grid; gap: 12px; margin: 20px 0 22px; }
@media (min-width: 620px) { .oceny { grid-template-columns: repeat(3, 1fr); } }
.ocena-box {
  display: grid; justify-items: center; gap: 4px;
  padding: 22px 14px; text-align: center;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; box-shadow: var(--cien-karta);
}
.ocena-box b { font-family: var(--font-heading); font-size: 30px; color: var(--morska); line-height: 1; }
.ocena-box small { font-size: 12.5px; color: var(--text-muted); }
.ocena-znak { color: var(--mieta); font-size: 18px; }

/* FAQ jako akordeon */
.faq-lista { display: grid; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 16px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] { border-color: rgba(31, 168, 140, .45); box-shadow: var(--cien-karta); }
.faq-item summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  min-height: 56px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2 {
  flex: 1 1 auto; margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.12rem); color: var(--morska); line-height: 1.35;
}
.faq-item summary::after {
  content: "+"; flex: 0 0 auto;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(31, 168, 140, .14);
  color: var(--mieta); font-size: 18px; font-weight: 700;
  transition: transform .25s;
}
.faq-item[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq-tresc { padding: 0 18px 18px; }
.faq-tresc p { font-size: 15px; color: var(--text-muted); line-height: 1.65; }

.mapa-h2 { font-size: clamp(1.4rem, 4.6vw, 1.9rem); color: var(--morska); margin-bottom: 14px; }

/* Karta usługi na stronie oferty niesie H2, nie H3 */
.offer-card h2 { font-size: clamp(1.15rem, 3.6vw, 1.4rem); color: var(--morska); margin-bottom: 10px; }

/* iframe niesie atrybut width=600 - na 390 px musi ustapic kontenerowi */
.mapa, .mapa-podpis { max-width: 100%; }
.mapa iframe { width: 100% !important; max-width: 100%; }

/* --------------------------------------------- czytelność bez obrazków -- */

/* Gdy zdjęcie hero się nie wczyta, tekst musi zostać czytelny. Ciemne tło
   pod fotografią jest tanim ubezpieczeniem i zdejmuje ryzyko białego na białym. */
.hero { background: #0B2830; }

/* Placeholder na ciemnym tle potrzebuje własnego wariantu - na hero i w stopce
   wersja miodowa schodziła do kontrastu 1,4 */
.hero .ph, .site-footer .ph, .pas-cta .ph, .trust .ph {
  background: rgba(255, 214, 138, .22);
  color: #FFE3B0;
}

/* iframe mapy niesie atrybut width="600"; na 390 px to poziomy scroll */
.mapa iframe { width: 100% !important; max-width: 100% !important; }
.mapa, .kontakt-grid, .kontakt-form, .kontakt-dane { min-width: 0; max-width: 100%; }

/* =============================================== POPRAWKI DYREKTORA v2 == */

/* --- gradient marki: morska głębia schodząca w miętę ------------------- */
:root {
  --grad-marka: linear-gradient(135deg, #0B2A34 0%, #123B47 42%, #1B6E68 100%);
  --grad-akcent: linear-gradient(135deg, #1FA88C 0%, #2FBFA0 55%, #6FD9C0 100%);
  --grad-mgla: linear-gradient(180deg, #FFFFFF 0%, #F1F7F6 55%, #E9F3F1 100%);
}

/* --- pasek menu: ikony i numer były krzywe i gubiły się w tle ---------- */
.header-in { gap: 10px; }
.site-header nav { gap: 18px; }

.nav-social { gap: 8px; margin-left: 2px; }
.ikona-social {
  width: 42px; height: 42px;
  border: 1px solid rgba(18, 59, 71, .22);
  background: #fff; color: var(--morska);
  line-height: 0;                       /* svg nie spycha ikony w dół */
}
.ikona-social svg {
  width: 20px; height: 20px;
  display: block; flex: 0 0 auto;
  stroke-width: 1.9;
}
.ikona-social:hover { background: var(--morska); border-color: var(--morska); color: #fff; }

.nav-tel {
  min-height: 46px; padding: 0 20px;
  background: var(--grad-marka);
  box-shadow: 0 6px 18px rgba(18, 59, 71, .28);
  letter-spacing: .01em; font-size: 15px;
  line-height: 1;
}
.nav-tel svg { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.nav-tel span { line-height: 1; }
.nav-tel:hover { filter: brightness(1.12); background: var(--grad-marka); }

/* --- pasek adresu pod hero -------------------------------------------- */
.trust { background: var(--grad-marka); }
.trust-in { padding-block: 14px; }
.trust-adres {
  display: inline-flex; align-items: center; gap: 13px;
  min-height: 52px; color: #fff; text-decoration: none;
  transition: opacity .2s;
}
.trust-adres:hover { opacity: .85; }
.trust-adres svg {
  flex: 0 0 auto; width: 22px; height: 22px; color: #7FE3CB;
}
.trust-adres b {
  display: block; font-family: var(--font-heading);
  font-size: clamp(15px, 4.2vw, 18px); color: #fff; letter-spacing: -.01em;
}
.trust-adres small {
  display: block; margin-top: 3px;
  font-size: 12.5px; color: rgba(255, 255, 255, .78);
}

/* --- nagłówki sekcji na środku ---------------------------------------- */
.sec-head--srodek { margin-inline: auto; text-align: center; }
.sec-head--srodek .muted { margin-inline: auto; }
.sec-head--srodek h2, .sec-head--srodek .muted, .sec-head--srodek .eyebrow { text-align: center; }
.services .dolegliwosci { justify-content: center; }

/* --- portret w sekcji "o mnie" ---------------------------------------- */
.o-mnie-foto img {
  width: 100%; height: auto; display: block;
  border-radius: 20px; box-shadow: var(--cien-mocny);
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
}

/* --- opinie: równe kafle, imiona zawsze na dole ------------------------ */
.opinie-grid { align-items: stretch; }
.opinia {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--grad-mgla);
}
.opinia p { flex: 1 1 auto; }
.opinia footer { margin-top: auto; }      /* stopka zjeżdża do dna karty */

.opinie-cta { margin-top: 26px; text-align: center; }

/* Pigułka jak przycisk telefonu, tylko w kolorach marki */
.btn-pigulka {
  background: var(--grad-marka); color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(18, 59, 71, .28);
}
.btn-pigulka:hover { filter: brightness(1.12); color: #fff; }
.section .btn-pigulka { background: var(--grad-marka); color: #fff; border-color: transparent; }

/* --- gradienty na akcentach ------------------------------------------- */
.btn-primary { background: var(--grad-akcent); color: #06231D; }
.btn-primary:hover { filter: brightness(1.06); background: var(--grad-akcent); }
.pas-cta { background: var(--grad-marka) !important; }
.site-footer { background: var(--grad-marka); }
.proces-nr { background: var(--grad-marka); }
.section:nth-of-type(even) { background: var(--grad-mgla); }
.podstrona-hero { background: var(--grad-mgla); }

/* Pasek adresu: na telefonie adres i dopisek muszą iść jeden pod drugim,
   inaczej flex ściska je w dwie wąskie kolumny */
.trust-in { display: block; }
.trust-adres { width: 100%; align-items: flex-start; padding-block: 4px; }
.trust-adres svg { margin-top: 3px; }
.trust-adres > span { flex: 1 1 auto; min-width: 0; }
.trust-adres b { line-height: 1.3; }
@media (min-width: 640px) {
  .trust-adres { align-items: center; }
  .trust-adres svg { margin-top: 0; }
}

/* Eyebrow w hero łamał się na dwie linie - skracamy odstępy */
.hero .eyebrow { letter-spacing: .14em; font-size: 11px; }

/* Stary pasek z trzema liczbami ustawiał .trust-in span na inline-flex.
   Nowy pasek adresu potrzebuje bloku, inaczej adres i dopisek stają w rzędzie. */
.trust-adres > span { display: block; }

/* Bazowy arkusz robi z karty grid o równych rzędach, przez co puchła do ~500 px
   przy trzech linijkach tekstu. Kolumna flex daje naturalną wysokość, a link
   i tak siada na dole karty. */
.offer-card { display: flex; flex-direction: column; }
.offer-card p { flex: 0 1 auto; }
.offer-card .link-card { margin-top: auto; }

/* Guzik "przeczytaj wszystkie opinie": pigułka na środku sekcji */
.section-cta { display: flex; justify-content: center; }

/* =============================================== POPRAWKI DYREKTORA v3 == */

/* --- numer w menu: biały tekst i nic nie wystaje z pigułki ------------- */
.nav-tel {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 0 20px; min-height: 46px;
  border: 0; border-radius: 999px;
  background: var(--grad-marka);
  color: #fff !important;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  line-height: 1; white-space: nowrap; overflow: hidden;
  box-shadow: 0 6px 18px rgba(18, 59, 71, .3);
}
.nav-tel span, .nav-tel svg { color: #fff !important; }
.nav-tel svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  display: block; stroke: #fff; fill: none;
}
.site-header nav > .nav-tel { border-bottom: 0; padding-block: 0; }
.site-header nav.open .nav-tel { width: 100%; }

/* --- pasek adresu: sam adres, na środku ------------------------------- */
.trust-in { text-align: center; }
.trust-adres {
  width: auto; justify-content: center; align-items: center;
  gap: 10px; margin-inline: auto;
}
.trust-adres svg { margin-top: 0; }
.trust-adres b { font-size: clamp(15px, 4.2vw, 19px); }

/* --- karty-pytania ze zdjęciem ---------------------------------------- */
.offer-card { padding: 0; overflow: hidden; }
.offer-foto {
  display: block; margin: 0 0 18px;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--tlo-mgla);
}
.offer-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.offer-card:hover .offer-foto img { transform: scale(1.04); }
.offer-card .offer-nr,
.offer-card h3,
.offer-card p,
.offer-card .link-card { margin-inline: clamp(20px, 4vw, 28px); }
.offer-card .link-card { margin-bottom: clamp(18px, 3vw, 24px); }
.offer-card h3 { font-size: clamp(1.2rem, 4vw, 1.45rem); }
.offer-card .offer-nr { display: block; margin-bottom: 8px; }

/* --- wzór pod opiniami ------------------------------------------------ */
.reviews {
  position: relative; isolation: isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%231FA88C' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M0 60c15-18 30-18 45 0s30 18 45 0 30-18 45 0'/%3E%3Cpath d='M-30 100c15-18 30-18 45 0s30 18 45 0 30-18 45 0'/%3E%3Cpath d='M-30 20c15-18 30-18 45 0s30 18 45 0 30-18 45 0'/%3E%3C/g%3E%3Ccircle cx='15' cy='60' r='2' fill='%23123B47' fill-opacity='.10'/%3E%3Ccircle cx='105' cy='60' r='2' fill='%23123B47' fill-opacity='.10'/%3E%3C/svg%3E"),
    var(--grad-mgla) !important;
  background-size: 120px 120px, cover;
}
.reviews::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .55) 55%, transparent 100%);
  pointer-events: none;
}
.reviews .opinia {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

/* W rozwiniętym menu przycisk z numerem ma iść na pełną szerokość */
.site-header nav.open .nav-tel { width: 100%; justify-self: stretch; }

/* ------------------------------------ kafle usług: mniejsze i zwarte --- */

/* Karty puchły przez wysokie zdjęcie 4:3 i duże odstępy. Niższy kadr,
   ciaśniejsze marginesy i mniejsza typografia mieszczą dwie karty w rzędzie
   już od 620 px, więc na telefonie też robią się krótsze. */
.uslugi-grid { gap: 12px; }
@media (min-width: 620px) { .uslugi-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .uslugi-grid { grid-template-columns: repeat(4, 1fr); } }

.offer-card { border-radius: 16px; }
.offer-foto { aspect-ratio: 16 / 10; margin-bottom: 14px; }

.offer-card .offer-nr,
.offer-card h3,
.offer-card p,
.offer-card .link-card { margin-inline: 16px; }
.offer-card .offer-nr { margin-bottom: 5px; font-size: 11.5px; }
.offer-card h3 { font-size: clamp(1.05rem, 3.4vw, 1.2rem); margin-bottom: 7px; }
.offer-card p { font-size: 14px; line-height: 1.55; }
.offer-card .link-card {
  margin-top: 12px; margin-bottom: 16px;
  min-height: 36px; font-size: 13px; gap: 5px;
}

/* Tagi dolegliwości też schodzą o klasę */
.dolegliwosci { gap: 6px; }
.dolegliwosci li { padding: 7px 13px; font-size: 13px; }

/* Kadr jeszcze niższy - kafel ma zachęcać, nie zajmować pół ekranu */
.offer-foto { aspect-ratio: 16 / 9; }