/* ══ IKONY 3D W NAWIGACJI ═══════════════════════════════════════════════════
   Ikony w .desktop-nav to teraz rendery szkła (WebP 72×72, przezroczyste tło)
   zamiast inline SVG. Arkusz ładuje się jako ostatni, więc nie potrzebuje
   ani jednego !important.

   PUŁAPKA 1 — cały dotychczasowy styl ikon wisi na selektorze
   `.desktop-nav>a svg` (refinement.css:169 rozmiar, matter.css:97 i
   refinement.css:189 chowanie poniżej 1200px). <img> pod ten selektor nie
   podpada, więc BEZ tego arkusza ikony wyrenderowałyby się w naturalnych
   72px i rozerwały nagłówek. Rozmiar i chowanie muszą być tu.

   PUŁAPKA 2 — zmierzone: przy 1024px nawigacja bez ikon ma 361px i po 113px
   luzu z każdej strony. Ikona 24px z odstępem 9px dokłada 33px na pozycję,
   czyli 165px — nie zmieści się. Dlatego poniżej 1200px ikona schodzi do 18px.

   PUŁAPKA 3 — podkreślenie aktywnej pozycji (`>span::after`, refinement.css)
   zostaje nietknięte. Nie dokładam drugiego wskaźnika, bo dwa naraz to szum;
   ikona dołącza do stanu aktywnego samym rozmiarem i poświatą.

   Rendery mają własny, wtopiony cień kontaktowy — żadnego `filter: drop-shadow`
   w stanie spoczynku, bo dubluje cień i brudzi krawędzie. */

.desktop-nav > a > .nav-ikona{
  width:var(--icon-large);
  height:var(--icon-large);
  flex:none;
  object-fit:contain;
  transition:transform .24s cubic-bezier(.22,1,.3,1),
             filter .24s cubic-bezier(.22,1,.3,1);
}

/* Aktywna pozycja — ikona lekko bliżej patrzącego. */
.desktop-nav > a[aria-current] > .nav-ikona{
  transform:scale(1.06);
  filter:drop-shadow(0 2px 6px rgba(124,107,176,.34)); /* lawenda (wcześniej turkus, zielone 21,128,97) */
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .desktop-nav > a:hover > .nav-ikona,
  .desktop-nav > a:focus-visible > .nav-ikona{
    transform:translateY(-2px) scale(1.08);
    filter:drop-shadow(0 4px 8px rgba(124,107,176,.3)); /* lawenda (wcześniej turkus, zielone 21,128,97) */
  }
}

/* Ponizej 1200px zmniejsza sie odstep, a ikony zachowuja wspolny rozmiar. */
@media (max-width:1199px){
  .desktop-nav > a > .nav-ikona{width:var(--icon-large);height:var(--icon-large);}
  .desktop-nav > a{gap:7px}
}

/* ══ GEOMETRIA — JEDEN SYSTEM ════════════════════════════════════════════════
   Ten arkusz jest ostatni w kaskadzie, więc tu (i tylko tu) żyje wspólna siatka.
   Oś:      --shell-w = min(1280px, 100% − 2 × --page-gutter), margin-inline:auto
   Sekcja:  padding-block: var(--section-space)  (56 → 72 px)
   Nagłówek sekcji: znak → eyebrow 16 · eyebrow → tytuł 12 · tytuł → opis 16
                    · nagłówek → treść 32 */

.refinement-eight{ --geo-mark:16px; --geo-eyebrow:12px; --geo-desc:16px; --geo-head:32px;
  /* PC: odstęp sekcji max 72 px (było 88). */
  --section-space:clamp(56px, 5vw, 72px); }

/* 1. Kontenery — jedna oś dla nagłówka, hero, sekcji i stopki. */
.refinement-eight :is(.shell, .hero-shell),
.refinement-eight .site-header{
  width:var(--shell-w);
  max-width:var(--content-max);
  margin-inline:auto;
}

/* 1a. Belka na PC rozciągnięta prawie na całą szerokość okna, kolorystyka jak
   na irenaustka.pl (2026-09-26). Telefon — bez zmian (kontener jak wyżej). */
@media (min-width:1024px){
  .refinement-eight .site-header{
    width:auto; max-width:none; margin-inline:14px;
    background:rgba(252,250,255,.9); border-color:rgba(221,213,238,.78);
    box-shadow:0 18px 42px rgba(58,47,91,.1);
  }
  .refinement-eight .nav-shell{ max-width:none; padding-inline:24px; }
  /* Menu przy przyciskach kontaktu (jak irenaustka.pl) — bez dwóch pustych
     przerw po rozciągnięciu belki; cienka kreska oddziela menu od przycisków. */
  .refinement-eight .desktop-nav{ margin-left:auto; gap:28px; }
  .refinement-eight .header-kontakt{ margin-right:0; padding-left:26px; border-left:1px solid rgba(124,107,176,.22); }
}
.refinement-eight .header-call{
  background:linear-gradient(145deg,#FFEDD5 0,#FDBA74 48%,#C2410C 100%);
  color:#431407;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 4px 14px rgba(234,88,12,.3);
}
.refinement-eight .header-call:hover{
  background:linear-gradient(145deg,#FED7AA 0,#FB923C 48%,#9A3412 100%);
  color:#431407;
}

/* 2. Sekcje — jeden odstęp góra/dół (także podstrona „O mnie”, było 64 px). */
.refinement-eight .section,
.refinement-eight.about-page .specialist{ padding-block:var(--section-space); }

/* 3a. Znak sekcji nad eyebrow zamiast w osobnej kolumnie 56 px —
       tekst nagłówków Cennika i Kontaktu wraca na wspólną oś. */
.refinement-eight .pricing .section-heading > div,
.refinement-eight .contact-opening-copy{ display:block; }
.refinement-eight .pricing .section-mark,
.refinement-eight .contact-opening .section-mark{ margin:0 0 var(--geo-mark); }

/* 3b. Eyebrow → tytuł. */
.refinement-eight .section-heading :is(h1, h2),
.refinement-eight .pricing h2,
.refinement-eight .contact-opening h2,
.refinement-eight .specialist-heading :is(h1, h2),
.refinement-eight .credentials-heading :is(h2, h3){ margin-top:var(--geo-eyebrow); }

/* 3c. Tytuł → opis pod spodem. */
.refinement-eight .specialist-heading :is(h1, h2){ margin-bottom:var(--geo-desc); }
.refinement-eight .documents-heading h3{ margin-top:0; }
.refinement-eight .documents-heading p{ margin-top:var(--geo-desc); }

/* 3d. Nagłówek → treść. Opis boczny Usług startuje od góry, nie od środka. */
.refinement-eight .section-heading,
.refinement-eight .pricing .section-heading,
.refinement-eight .contact-opening,
.refinement-eight .documents-heading{ margin-bottom:var(--geo-head); }
.priority-seven.refinement-eight .services .section-heading{ align-items:start; margin-bottom:var(--geo-head); }
.refinement-eight .pricing .section-heading{ align-items:flex-end; }
.refinement-eight .pricing .section-heading > p{ max-width:none; }

/* 4. Kontakt (PC): formularz startuje na wysokości nagłówka zamiast pod nim —
      znika puste pole po prawej stronie tytułu. Kolejność DOM bez zmian. */
@media (min-width:1024px){
  .refinement-eight #kontakt > .shell{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:auto 1fr auto;
    column-gap:var(--layout-gap); align-items:start;
  }
  .refinement-eight #kontakt .contact-layout{ display:contents; }
  .refinement-eight #kontakt .contact-opening{ grid-column:1; grid-row:1; }
  .refinement-eight #kontakt .contact-copy{ grid-column:1; grid-row:2; padding-top:0; }
  .refinement-eight #kontakt .form-panel{ grid-column:2; grid-row:1 / 3; }
  .refinement-eight #kontakt .directions-layout{ grid-column:1 / -1; grid-row:3; }
}

/* 5. Tekst „O mnie” — jeden rozmiar i interlinia dla całego bloku
      (było 20/33 px w dwóch pierwszych akapitach i 16/26 px w pozostałych). */
.refinement-eight .specialist-heading > p:not(.eyebrow),
.refinement-eight .specialist-care p{ font-size:17px; line-height:1.75; max-width:540px; }
.refinement-eight .specialist-heading > p + p,
.refinement-eight .specialist-care > p + p{ margin-top:var(--geo-desc); }
@media (min-width:700px){
  /* Podstrona „O mnie”: blok tekstu czyta się jako całość — 16 px jak między akapitami (było 24). */
  .refinement-eight.about-page .specialist-profile{ row-gap:var(--geo-desc); }
}

@media (max-width:699px){
  .priority-seven.refinement-eight .services .section-heading{ margin-bottom:var(--geo-head); row-gap:var(--geo-desc); }
  .refinement-eight .section-heading > p{ margin-top:var(--geo-desc); }
  .priority-seven.refinement-eight .services .section-heading > p{ margin-top:0; }
  .refinement-eight .credentials{ row-gap:var(--geo-head); }
  .priority-seven.refinement-eight .contact-opening-copy{ margin-bottom:var(--geo-head); }
  .priority-seven.refinement-eight .contact-copy > .contact-intro{ margin-bottom:var(--geo-eyebrow); }
  .refinement-eight .specialist-heading > p:not(.eyebrow),
  .refinement-eight .specialist-care p{ font-size:var(--fs-body); }
}

/* ===== System kolorów 60/30/10 (2026-09-26) =====
   60% tło kremowe #FAFAF9 (całe strony, karty #FFF) · 30% lawenda marki #7C6E9B
   (nagłówki, ikony, etykiety, ceny, linki, tło hero #EDE9FE) · szałwia #5A8274 / mięta
   #DCFCE7 (znaczniki, kafle terapii) · 10% koral #C2410C (przyciski, telefon).
   Wartości bazowe w :root matter.css; tu role, które nie idą przez zmienne. */
.refinement-eight .contact,.refinement-eight .site-footer{ --piasek:#FAFAF9; --piasek-gleboki:#F5F5F4; --piasek-kreska:#E7E5E4; --piasek-cien:#EDE9FE; }
.refinement-eight h1,.refinement-eight h2,.refinement-eight h3,.refinement-eight .hero h1 > span,.refinement-eight .services h2{ color:#7C6E9B; }
.refinement-eight #uslugi .refined-service h3{ color:#7C6E9B; }
.refinement-eight .desktop-nav > a:hover,.refinement-eight .desktop-nav > a:focus-visible,.refinement-eight .desktop-nav > a[aria-current]{ color:#6A5D8A; }
.refinement-eight .price-amount,.refinement-eight .care-quote,.refinement-eight .current-course>span,
.refinement-eight .text-link,.refinement-eight .site-footer .text-link,.refinement-eight .directions-copy .text-link,.refinement-eight .price-note a{ color:#6A5D8A; }
.refinement-eight .credentials .current-course{ background:#EDE9FE; }
.refinement-eight .check-list svg,.refinement-eight .symptoms-list svg{ color:#5A8274; }
.refinement-eight .status-dot{ background:#5A8274; }
.refinement-eight .specialist-details li::marker{ color:#5A8274; }
.refinement-eight #uslugi .service-art,.refinement-eight .consultation-bridge img{ background:#F0FDF4; box-shadow:inset 0 0 0 1px #DCFCE7; border-radius:16px; }
/* Hero z delikatną lawendą przechodzi płynnie w krem (reguła przejść). */
.refinement-eight .services{ --morela:#FAFAF9; --morela-kreska:#E7E5E4; background:linear-gradient(to bottom,var(--bg-hero) 0,var(--bg-main) var(--przejscie)); }
/* Rant zdjęcia hero dopasowany do lawendowego tła hero. */
.photography-nine .hero-photo{ box-shadow:0 5px 0 #CFC5F5,0 28px 44px -30px #1c191966,0 4px 14px -8px #1c191933; }
/* Cennik: biała płyta (60/30/10: cennik #FFF), rant jasnej lawendy, czas trwania w szarości drugorzędnej. */
.refinement-eight .price-panel{ background:#FFFFFF; box-shadow:0 6px 0 #DDD6FE; }
.refinement-eight .price-duration{ color:#57534E; }
/* Dyplomy: większe miniatury i podpisy, lupka w lawendowym kółku (hover: wypełnia się). */
.refinement-eight .cert-tile{ cursor:zoom-in; }
.refinement-eight .cert-tile > svg{ box-sizing:border-box; width:36px; height:36px; padding:8px; right:12px; bottom:12px; border-radius:50%; background:#EDE9FE; color:#6A5D8A; stroke-width:2; transition:background .2s, color .2s, transform .2s; }
.refinement-eight .cert-tile:is(:hover, :focus-visible) > svg{ background:#7C6E9B; color:#FFFFFF; transform:scale(1.12); }
.refinement-eight .credentials-documents .cert-grid .cert-tile > span,
.refinement-eight .credentials-documents .featured-documents .cert-tile > span{ padding-right:46px; }
@media (min-width:700px){
  .refinement-eight .credentials-documents .cert-grid .cert-tile > span,
  .refinement-eight .credentials-documents .featured-documents .cert-tile > span{ font-size:var(--fs-body-s); }
}
@media (min-width:1024px){
  .refinement-eight .featured-documents .cert-tile{ grid-template-columns:124px minmax(0,1fr); }
  .refinement-eight .featured-documents .cert-tile .cert-thumb{ width:124px; height:175px; }
}
@media (max-width:699px){
  .refinement-eight .featured-documents .cert-tile{ grid-template-columns:100px minmax(0,1fr); }
  .refinement-eight .featured-documents .cert-tile .cert-thumb{ width:100px; height:141px; }
  .refinement-eight .credentials-documents .featured-documents .cert-tile > span{ font-size:var(--fs-body-s); }
}
/* Karty terapii bez linku „Zapytaj o terapię” — rolę CTA przejmuje baner konsultacji. */
.refinement-eight #uslugi .refined-service{ grid-template-areas:"art title" "copy copy"; grid-template-rows:auto 1fr; }
/* Hero: „Poznaj terapie” jako przycisk z obwódką, w jednym rzędzie z głównym przyciskiem. */
.refinement-eight .hero-actions{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:12px; }
.refinement-eight .hero-actions .text-link{ margin:0; min-height:0; padding:0 24px; gap:10px; justify-content:center; border:1.5px solid #C9BEE8; border-radius:100px; background:#FFFFFF; color:#6A5D8A; font-size:var(--fs-body-s); font-weight:600; transition:border-color .25s, background .25s, transform .25s; }
.refinement-eight .hero-actions .text-link:hover{ border-color:#7C6E9B; background:#F5F3FF; color:#6A5D8A; transform:translateY(-3px); }
.refinement-eight .hero-actions .button{ margin:0; }
@media (max-width:699px){
  .refinement-eight .hero-actions{ flex-direction:column; align-items:center; gap:10px; }
  .refinement-eight .hero-actions > a{ width:100%; max-width:360px; }
  .refinement-eight .hero-actions .text-link{ min-height:52px; }
}
/* Hero (PC, 2026-09-26): opis + przyciski jednym blokiem po lewej, zdjęcie po prawej. */
@media (min-width:1024px){
  .refinement-eight .hero-shell{ grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); column-gap:clamp(40px,5vw,72px); }
  .refinement-eight .hero-intro{ grid-column:1; grid-row:3; align-self:end; max-width:460px; margin:0; padding:26px 0 0; border-bottom:0; font-size:var(--fs-lead); line-height:1.7; }
  .refinement-eight .hero-actions{ grid-column:1; grid-row:4; align-self:start; margin:30px 0 0; }
  .photography-nine .hero-photo{ grid-column:2; grid-row:3 / 5; }
  .refinement-eight .hero-bottom{ grid-row:5; }
}
/* Nagłówek: słuchawka w kolorze przycisku „Zapytaj o wizytę” (pełny koral, biała ikona), Messenger — białe kółko
   z niebieską ikoną i subtelną niebieską obwódką; oba bez gradientu i poświaty. Najechanie: tło bez zmian,
   sama ikona lekko się wysuwa (unosi i powiększa z cieniem). */
.refinement-eight .header-call,
.refinement-eight .header-call:hover{ background:#C2410C; color:#FFFFFF; box-shadow:0 6px 16px -12px rgba(24,63,53,.5); }
.refinement-eight .header-messenger,
.refinement-eight .header-messenger:hover{ background:#FFFFFF; color:#0084FF; box-shadow:inset 0 0 0 1.5px rgba(0,132,255,.25), 0 6px 16px -12px rgba(24,63,53,.5); }
.refinement-eight :is(.header-call, .header-messenger)::after{ content:none; }
.refinement-eight :is(.header-call, .header-messenger) svg{ transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s; }
.refinement-eight .header-call:hover svg{ transform:translateY(-2px) scale(1.2); filter:drop-shadow(0 3px 2px rgba(124,45,18,.55)); }
.refinement-eight .header-messenger:hover svg{ transform:translateY(-2px) scale(1.2); filter:drop-shadow(0 3px 2px rgba(0,90,180,.3)); }
@media (max-width:1023px){
  #mobile-cta > a.cta-messenger{ color:#0084FF; box-shadow:inset 0 0 0 1.5px rgba(0,132,255,.25), 0 2px 5px -3px #10262040; }
}
/* Menu na PC bez piktogramów (2026-09-26, od użytkownika) — sama typografia: 15 px, szersze odstępy. */
@media (min-width:1024px){
  .refinement-eight .desktop-nav{ gap:36px; }
  .refinement-eight .desktop-nav > a{ font-size:15px; font-weight:500; letter-spacing:.01em; }
}
/* Kontakt: bez kafelka „Solec koło Konstancina” (dublował tytuł „Dojazd”) — mail jest ostatni, bez kreski pod spodem. */
.refinement-eight .contact-email{ border-bottom:0; }

/* ===== Prosty przekaz (2026-09-26, od użytkownika) ===== */
/* 1) Bez ruchu: żadnych animacji, wysuwania, przechyłów, przybliżeń i uniesień.
      Jedyna reakcja na najechanie — zmiana koloru przycisków i linków w 0,15 s. */
.refinement-eight *,.refinement-eight *::before,.refinement-eight *::after{ animation:none !important; transition:none !important; }
.refinement-eight :is(a,button,summary){ transition:color .15s ease, background-color .15s ease, border-color .15s ease, text-decoration-color .15s ease !important; }
.refinement-eight .reveal{ opacity:1 !important; transform:none !important; }
.refinement-eight :is(.button,.round-link,.header-call,.header-messenger,.cert-tile,.service-card,.text-link):hover,
.refinement-eight :is(.button,.round-link,.header-call,.header-messenger,.cert-tile,.service-card,.hero-photo,.portrait,.editorial-photo,.care-photo,.map-holder,.therapy-detail summary):hover :is(img,svg),
.refinement-eight .cert-tile:focus-visible > svg{ transform:none !important; }

/* 2) Jedno główne działanie: numer telefonu widoczny w nagłówku (PC), w hero koralowe
      „Umów konsultację” + zwykły link zamiast drugiego przycisku. */
@media (min-width:1024px){
  .refinement-eight .header-call{ width:auto; padding:0 20px 0 16px; gap:8px; }
  .refinement-eight .header-call span{ position:static; width:auto; height:auto; overflow:visible; clip:auto; font-size:15px; font-weight:600; letter-spacing:.01em; }
}
.refinement-eight .hero-actions{ align-items:center; gap:14px 28px; }
.refinement-eight .hero-actions .text-link,
.refinement-eight .hero-actions .text-link:hover{ padding:0; border:0; border-radius:0; background:none; min-height:44px; font-size:var(--fs-body); font-weight:600; color:#6A5D8A; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.refinement-eight .hero-actions .text-link{ text-decoration-color:#DDD6FE; }
.refinement-eight .hero-actions .text-link:hover{ text-decoration-color:currentColor; }

/* Hero: trzy fakty zamiast odnośnika „Kto poprowadzi terapię”. */
.refinement-eight .hero-bottom{ display:block; }
.refinement-eight .hero-fakty{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.refinement-eight .hero-fakty li{ display:grid; align-content:start; gap:2px; padding:0 28px; border-left:1px solid #E7E5E4; }
.refinement-eight .hero-fakty li:first-child{ padding-left:0; border-left:0; }
.refinement-eight .hero-fakty strong{ font-size:17px; font-weight:600; color:#1C1917; }
.refinement-eight .hero-fakty span{ font-size:var(--fs-body-s); line-height:1.5; color:#57534E; }
@media (max-width:699px){
  .refinement-eight .hero-fakty{ grid-template-columns:1fr; }
  .refinement-eight .hero-fakty li{ padding:12px 0; border-left:0; border-top:1px solid #E7E5E4; }
  .refinement-eight .hero-fakty li:first-child{ padding-top:0; border-top:0; }
}

/* 3) Kiedy warto przyjść? — oś rozwoju mowy: kropki na linii, na telefonie i tablecie w pionie.
      Lawendowe tło hero przechodzi płynnie w krem na tej sekcji (reguła przejść). */
.refinement-eight .kiedy{ --przejscie:clamp(140px, 14vw, 220px); background:linear-gradient(to bottom,var(--bg-hero) 0,var(--bg-main) var(--przejscie)); }
.refinement-eight .services{ background:var(--bg-main); }
.refinement-eight .os-rozwoju{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 28px; margin:8px 0 32px; padding:0; list-style:none; }
.refinement-eight .os-rozwoju > li{ position:relative; padding-top:32px; border-top:2px solid #DDD6FE; }
.refinement-eight .os-rozwoju > li::before{ content:""; position:absolute; top:-8px; left:0; width:14px; height:14px; border-radius:50%; background:#7C6E9B; box-shadow:0 0 0 4px var(--bg-main); }
.refinement-eight .os-wiek{ margin:0 0 14px; font-size:var(--fs-ui); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#6A5D8A; }
.refinement-eight .os-wiek strong{ margin-right:2px; font-family:var(--serif); font-size:clamp(38px,3vw,48px); font-weight:500; line-height:1; letter-spacing:0; color:#7C6E9B; }
.refinement-eight :is(.os-rozwoju,.os-zawsze) ul{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.refinement-eight :is(.os-rozwoju,.os-zawsze) ul li{ position:relative; padding-left:16px; font-size:var(--fs-body-s); line-height:1.55; color:#1C1917; }
.refinement-eight :is(.os-rozwoju,.os-zawsze) ul li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:#5A8274; }
.refinement-eight .os-zawsze{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:start; margin:0 0 56px; padding:24px 28px; border-radius:var(--radius-card); background:#FFFFFF; box-shadow:0 5px 0 #DDD6FE; }
.refinement-eight .os-zawsze h3{ margin:0; font-size:var(--fs-h3-s); }
.refinement-eight .os-zawsze ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 32px; }
@media (max-width:1023px){
  .refinement-eight .os-rozwoju{ grid-template-columns:1fr; gap:0; margin-left:6px; border-left:2px solid #DDD6FE; }
  .refinement-eight .os-rozwoju > li{ padding:0 0 28px 26px; border-top:0; }
  .refinement-eight .os-rozwoju > li:last-child{ padding-bottom:4px; }
  .refinement-eight .os-rozwoju > li::before{ top:12px; left:-8px; }
  .refinement-eight .os-zawsze{ grid-template-columns:1fr; gap:14px; padding:22px; }
}
@media (max-width:699px){ .refinement-eight .os-zawsze ul{ grid-template-columns:1fr; } }

/* 4) Formy terapii jako lista bez kart; „O mnie” i wykształcenie z dyplomami jednym blokiem. */
.refinement-eight #uslugi .refined-service,
.refinement-eight #uslugi .refined-service:hover{ padding:24px 0 0; border:0; border-top:1px solid #E7E5E4; border-radius:0; background:none; box-shadow:none; }
.refinement-eight #uslugi .services-grid{ gap:40px; }
.refinement-eight:not(.about-page) .specialist{ padding-bottom:0; }
.refinement-eight:not(.about-page) .competencies{ padding-top:clamp(56px,6vw,88px); }

/* Telefon/tablet (<1024 px, 2026-09-26, od użytkownika): dolny pasek = trzy kółka tej samej wielkości (46 px):
   telefon (bez numeru) w stylu głośnika, Messenger bez zmian (białe kółko, niebieska ikona) i głośnik
   (przenosi go tu refinement.js, zamiast „Zapytaj o wizytę”). Głośnik po włączeniu pulsuje w rytmie nagrania. */
@media (max-width:1023px){
  #mobile-cta:not([hidden]){ display:flex; justify-content:center; align-items:center; gap:28px; }
  #mobile-cta > a, #mobile-cta > .dzwiek{ position:relative; left:auto; bottom:auto; z-index:auto; flex:none; display:grid; place-items:center;
    width:46px; height:46px; min-height:46px; padding:0; gap:0; border:0; border-radius:50%; }
  #mobile-cta > a:first-child, #mobile-cta > .dzwiek{
    background:linear-gradient(145deg,#F3F0FA 0,#C9BEE8 48%,#7C6BB0 100%); color:#2E2550;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.68), 0 8px 20px rgba(124,107,176,.28); }
  #mobile-cta > .dzwiek{ box-shadow:inset 0 1px 0 rgba(255,255,255,.68), 0 8px 20px rgba(124,107,176,.28),
    0 0 0 calc(var(--puls) * 14px) rgba(124,107,176,calc(.08 + var(--puls) * .2)); }
  #mobile-cta > .dzwiek.gra{ background:linear-gradient(145deg,#E8E2F6 0,#B3A5DD 48%,#7466A6 100%); }
  #mobile-cta > .dzwiek .dzwiek-ikona{ width:46px; height:46px; }
  #mobile-cta > a:first-child svg, #mobile-cta > .dzwiek svg{ width:24px; height:24px; stroke-width:2; }
  #mobile-cta > a:first-child::after{ content:none; } /* telefon jak głośnik — bez dawnego pierścienia */
  #mobile-cta > a.cta-messenger, #mobile-cta > a.cta-messenger:last-child{ background:#FFFFFF; color:#0084FF;
    box-shadow:inset 0 0 0 1.5px rgba(0,132,255,.25), 0 2px 5px -3px #10262040; }
  #mobile-cta > :is(a,.dzwiek):focus-visible{ outline:3px solid #5B4E8C; outline-offset:3px; }
}

/* Kontakt → Dojazd (2026-09-26, od użytkownika): dokładny adres gabinetu pod nagłówkiem. */
.refinement-eight .directions-copy .adres-gabinetu{ margin:6px 0 14px; font-style:normal; font-size:var(--fs-lead); font-weight:600; line-height:1.5; color:#1C1917; }

/* Galeria (2026-09-26, od użytkownika): 6 zdjęć gabinetu w białych ramkach z podpisem, rant jasnej lawendy
   jak przy innych zdjęciach; klik otwiera lightbox (data-photo w matter-ui.js). Bez ruchu — tylko kolor podpisu. */
.refinement-eight .galeria-siatka{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,32px); margin:0; padding:0; list-style:none; }
.refinement-eight .galeria-siatka > li{ display:flex; }
.refinement-eight .galeria-kafel{ display:block; flex:1; padding:8px 8px 0; border-radius:24px; background:#FFFFFF; color:#1C1917; text-decoration:none; cursor:zoom-in;
  box-shadow:inset 0 0 0 1px #EFEDEC, 0 6px 0 #DDD6FE, 0 24px 40px -30px rgba(74,63,118,.45); }
.refinement-eight .galeria-kafel img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:17px; background:#EDE9FE; }
.refinement-eight .galeria-podpis{ display:block; padding:13px 8px 15px; font-size:var(--fs-body-s); font-weight:600; line-height:1.35; color:#1C1917; }
.refinement-eight .galeria-kafel:hover .galeria-podpis{ color:#6A5D8A; }
.refinement-eight .galeria-kafel:focus-visible{ outline:3px solid #7C6E9B; outline-offset:4px; }
@media (max-width:699px){
  .refinement-eight .galeria-siatka{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .refinement-eight .galeria-kafel{ padding:6px 6px 0; border-radius:18px; }
  .refinement-eight .galeria-kafel img{ border-radius:13px; }
  .refinement-eight .galeria-podpis{ padding:10px 6px 12px; font-size:var(--fs-ui); }
}

/* Galeria jako okno na wierzchu (2026-09-26, od użytkownika): pokazuje się tylko po kliknięciu „Galeria”
   w menu; pasek z tytułem i krzyżykiem zostaje u góry przy przewijaniu. Bez animacji (zasada „bez ruchu”). */
.refinement-eight .galeria-okno{ width:min(1180px, calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); margin:auto;
  padding:0 clamp(20px,3vw,40px) clamp(24px,3vw,40px); border:0; border-radius:28px; background:#FAFAF9; color:#1C1917;
  overflow:auto; overscroll-behavior:contain; box-shadow:0 30px 80px -30px rgba(28,25,23,.55); }
.refinement-eight .galeria-okno::backdrop{ background:rgba(28,25,23,.55); backdrop-filter:blur(6px); }
.refinement-eight .galeria-okno-pasek{ position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:clamp(20px,3vw,36px) 0 14px; background:#FAFAF9; }
.refinement-eight .galeria-okno-pasek .eyebrow{ margin:0; }
.refinement-eight .galeria-okno-pasek h2{ margin:6px 0 0; font-size:clamp(30px,3.2vw,46px); line-height:1.05; }
.refinement-eight .galeria-opis{ max-width:62ch; margin:0 0 28px; font-size:var(--fs-body); line-height:1.65; color:#57534E; }
.refinement-eight .galeria-zamknij{ flex:none; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%;
  background:#FFFFFF; color:#2E2550; cursor:pointer; box-shadow:inset 0 0 0 1px #E7E5E4, 0 4px 0 #DDD6FE; }
.refinement-eight .galeria-zamknij:hover{ background:#EDE9FE; }
.refinement-eight .galeria-zamknij:focus-visible{ outline:3px solid #7C6E9B; outline-offset:3px; }
.refinement-eight .galeria-zamknij svg{ width:22px; height:22px; }
@media (max-width:699px){
  .refinement-eight .galeria-okno{ width:100vw; height:100dvh; max-height:100dvh; border-radius:0; padding:0 16px 24px; }
  .refinement-eight .galeria-okno-pasek{ padding-top:16px; }
  .refinement-eight .galeria-opis{ margin-bottom:20px; }
}