/* Your Mind Shift – poprawki do kopii z Webflow (ładowane po CSS Webflow).
   Tryb jasny (body bez klasy .white) jest teraz domyślny i ma beżowe tło;
   tekstura z kropkami i kreskami zostaje bez zmian. */

:root {
  --yms-beige: #F2E6D5;
  --yms-card: rgba(252, 247, 240, .8);
  --yms-card-line: rgba(150, 118, 84, .3);
  --yms-card-dark: #2E2016;
  --yms-card-cream: #FBF1E4;
  --yms-gold-text: #926134; /* karmel: kontrast >= 3 dla dużych napisów także pod cieniem liści */
}

/* Warianty jasne/ciemne: Webflow przełączał je jQuery .toggle(), co rozjeżdżało się
   przy zmianie szerokości okna (np. dwa menu naraz). Teraz decyduje klasa body:
   .white = tryb ciemny, brak .white = tryb jasny (beżowy). */
.body.white .icon-light,
.body:not(.white) .icon-dark {
  display: none !important;
}

.body,
.body-2,
.loading-wrapper,
.menu-wrapper {
  background-color: var(--yms-beige);
}

/* Karty w sekcji „Rodzaje hipnoterapii”: karta z papieru – jaśniejsza od tła, z cienką ramką i drugą linią
   w środku (jak ramki na podstronie oferty), numer i ikona w karmelu. Po najechaniu karta płynnie „odwraca się”
   w głęboki atrament z kremowym tekstem i złotą ikoną (ikony są bladozłote, narysowane pod ciemne tło). */
.body:not(.white) .slider-card:not(.dark) {
  background-color: var(--yms-card);
  border: 1px solid var(--yms-card-line);
  outline: 1px solid rgba(150, 118, 84, .16);
  outline-offset: -8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 40px -30px rgba(70, 45, 25, .5);
  color: var(--yms-ink);
  transition: background-color .4s ease, border-color .4s ease, outline-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.body:not(.white) .slider-card:not(.dark) :is(.data-tittle, .slider-para) {
  color: var(--yms-ink);
  transition: color .4s ease;
}
.body:not(.white) .slider-card:not(.dark) .slider-hidded-text {
  color: var(--yms-taupe);
  transition: color .4s ease;
}
.body:not(.white) .slider-card:not(.dark) .bimber {
  color: var(--yms-gold-text);
  transition: color .4s ease;
}
/* bladozłote ikony -> karmel; strzałka „Więcej” (w kartach 4 i 5 bez klasy) zostaje czarna */
.body:not(.white) .slider-card:not(.dark) .slider-image {
  filter: brightness(.59) saturate(2.6);
  transition: filter .4s ease;
}
.body:not(.white) .slider-card:not(.dark) img[src*="Right-Arrow"] {
  filter: none;
  transition: filter .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .body:not(.white) .slider-card:not(.dark):hover {
    background-color: var(--yms-card-dark);
    border-color: var(--yms-card-dark);
    outline-color: rgba(219, 189, 154, .3);
    box-shadow: 0 30px 50px -30px rgba(46, 32, 22, .75);
    transform: translateY(-4px);
  }
  .body:not(.white) .slider-card:not(.dark):hover :is(.data-tittle, .slider-para) {
    color: var(--yms-card-cream);
  }
  .body:not(.white) .slider-card:not(.dark):hover .slider-hidded-text {
    color: rgba(251, 241, 228, .82);
  }
  .body:not(.white) .slider-card:not(.dark):hover .bimber {
    color: #DBBD9A;
  }
  .body:not(.white) .slider-card:not(.dark):hover .slider-image {
    filter: none;
  }
  .body:not(.white) .slider-card:not(.dark):hover img[src*="Right-Arrow"] {
    filter: invert(1) sepia(.2);
  }
}

/* Złote napisy w trybie jasnym */
.body:not(.white) .text-link.icon-dark-copy,
.body:not(.white) .text-span-26,
.body:not(.white) .text-span-28,
.body:not(.white) .text-span-29,
.body:not(.white) ._2nd-cms-card-title,
.body:not(.white) .secondary-color {
  color: var(--yms-gold-text);
}

/* Stopka: jasnoszare linki społecznościowe były prawie niewidoczne na jasnym tle */
.body:not(.white) .language-link.we:not(.icon-dark) {
  color: var(--yms-taupe);
}

/* Link do programu w odpowiedzi FAQ */
.yms-faq-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tło strony (PL i EN, wszystkie strony z tym plikiem) w trybie jasnym: papier w słońcu z cieniem liści.
   ::before – sam papier, nieruchomy i ostry na każdym ekranie: kolor z podstrony „Zakorzeniona w sobie”, miękkie
   światło z lewego górnego rogu, delikatne obłoki, ząbek papieru i ziarno (wszystko w SVG/CSS, bez zdjęcia).
   ::after – cień gałązek oliwnych w prawym górnym rogu (site/assets/yms-cien-lisci.svg z tools/tlo/liscie.py);
   kołysze się jak na wietrze i „oddycha” razem ze światłem (12 s, ok. 5 spokojnych oddechów na minutę).
   Cień przyciemnia papier najwyżej o 12 % – kolory tekstów są dobrane tak, żeby i pod nim miały kontrast AA. */
:root {
  --yms-paper-layers:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeDiffuseLighting%20lighting-color='%23fff'%20surfaceScale='1'%3E%3CfeDistantLight%20azimuth='120'%20elevation='58'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='1'%20intercept='-.35'/%3E%3CfeFuncG%20type='linear'%20slope='1'%20intercept='-.35'/%3E%3CfeFuncB%20type='linear'%20slope='1'%20intercept='-.35'/%3E%3CfeFuncA%20type='linear'%20slope='0'%20intercept='.38'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='1200'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.0035'%20numOctaves='3'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='1.6'%20intercept='-.3'/%3E%3CfeFuncG%20type='linear'%20slope='1.6'%20intercept='-.3'/%3E%3CfeFuncB%20type='linear'%20slope='1.6'%20intercept='-.3'/%3E%3CfeFuncA%20type='linear'%20slope='0'%20intercept='.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(85% 70% at 10% 0%, rgba(253, 248, 241, .7), rgba(253, 248, 241, 0) 70%),
    linear-gradient(160deg, #F0E3D4 0%, #EBDBCA 48%, #E6D3BF 100%);
  --yms-paper-blend: multiply, soft-light, soft-light, normal, normal;
}
.body:not(.white) {
  background: #EAD8C5;
}
.body:not(.white)::before,
.body:not(.white)::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
.body:not(.white)::before,
.body:not(.white) .loading-wrapper {
  background: var(--yms-paper-layers);
  background-color: #EAD8C5;
  background-blend-mode: var(--yms-paper-blend);
}
.body:not(.white)::before {
  inset: 0;
}
.body:not(.white)::after {
  inset: -2%;
  background: url("/assets/yms-cien-lisci.svg") right top / min(1150px, 95vw) auto no-repeat;
  opacity: .12;
  transform-origin: 100% 0;
  animation: yms-liscie 24s ease-in-out infinite alternate, yms-oddech 12s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes yms-liscie {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  35% { transform: rotate(.9deg) translate3d(-7px, 5px, 0); }
  70% { transform: rotate(-.5deg) translate3d(5px, -3px, 0); }
  100% { transform: rotate(.5deg) translate3d(-3px, 3px, 0); }
}
@keyframes yms-oddech {
  0%, 100% { opacity: .12; }
  50% { opacity: .085; }
}
/* na telefonie gałązki większe i częściowo poza ekranem, żeby nie były miniaturą w rogu */
@media (max-width: 700px) {
  .body:not(.white)::after {
    background-size: 160vw auto;
    background-position: right -18vw top -10vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .body:not(.white)::after {
    animation: none;
  }
}

/* Blog na telefonie i tablecie.
   Tytuły kart i zgoda pod newsletterem miały interlinię 1.0 – dwa wiersze nachodziły na siebie. */
.main-blog-title {
  line-height: 1.2;
}
.small-text-block {
  line-height: 1.45;
}
/* Wybrana kategoria w filtrach bloga nie była niczym wyróżniona */
.checkbox.fs-cmsfilter_active .checkbox-label {
  color: var(--yms-gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.body.white .checkbox.fs-cmsfilter_active .checkbox-label {
  color: #DBBD9A;
}
/* Logo na tablecie i telefonie: Webflow odsuwał je od krawędzi tylko na stronie głównej (klasa w--current);
   na blogu i we wpisach stało przy samej krawędzi ekranu. Teraz wszędzie jak na stronie głównej. */
@media screen and (max-width: 991px) {
  .nav_brand {
    left: 2.5rem;
    right: auto;
  }
}
@media screen and (max-width: 767px) {
  .nav_brand {
    left: 1.25rem;
  }
}
/* Filtry kategorii: zamiast rzędów rozrzuconych po szerokości (space-around, odstęp 30 px) – zwarte,
   wyśrodkowane wiersze na tablecie i telefonie; na komputerze zostaje jeden rząd z Webflow. */
@media screen and (max-width: 991px) {
  .collection-list-4 {
    justify-content: center;
    gap: 6px 18px;
  }
}
@media screen and (max-width: 767px) {
  .collection-list-4 {
    gap: 2px 4px;
  }
  .filters2_item .w-checkbox.checkbox {
    padding: 7px 10px;
  }
  .filters2_item .checkbox-label {
    font-size: 13px;
    letter-spacing: .04em;
  }
  /* „Wszystkie Artykuły” w jednym wierszu, liczba wyników pod spodem zamiast ściśniętej obok */
  .allarticles-wrapper {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
  }
  .allarticles-wrapper .heading-3 {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Odświeżenie wyglądu pod tło papieru (tryb jasny): ciepły atrament zamiast czystej czerni, ciepłe linie
   zamiast szarych, teksty pomocnicze w ciepłym taupe. Kolory sprawdzone pod kątem kontrastu na papierze. */
:root {
  --yms-ink: #2E2016;
  --yms-taupe: #604E3C;
  --yms-taupe-soft: #7B6859;
  --yms-caramel-deep: #6F4521;
  --yms-line: rgba(110, 91, 71, .42);
  --yms-line-strong: rgba(46, 32, 22, .62);
}
.body:not(.white) {
  color: var(--yms-ink);
}
.body:not(.white) :is(.text-block, .footer-link-two, .footer-link-two-copy, .text-link.absolute, .card-cms-cta-link,
  .date-cms, .cms-sub-copy, .cms-sub-copy-copy, ._2nd-date, .smi-bold, .text-block-10, .text-feild.light, .id,
  .line-increase-2.max-w.icon-light) {
  color: var(--yms-ink);
}
/* odpowiedzi w FAQ: Webflow przyciemniał je przez opacity .7 – pełny kolor taupe wygląda tak samo, a ma pewny kontrast */
.body:not(.white) .faq-p {
  opacity: 1;
  color: var(--yms-taupe);
}
.body:not(.white) .text-feild.light::placeholder {
  color: var(--yms-ink);
}
.body:not(.white) :is(.fcqs-black, .text-block-16, .small-text-block, .chang-color, .footer-copyright, .text-block-8,
  .blog-main-date) {
  color: var(--yms-taupe);
}
/* małe złote napisy (np. „Umów wizytę”) ciemniejsze, żeby były czytelne */
.body:not(.white) :is(.text-link.icon-dark-copy, .text-link.secondary-color, .text-span-28, ._2nd-cms-card-title) {
  color: var(--yms-caramel-deep);
}
/* „Certificate” był bladozłoty (kolor z trybu ciemnego) i prawie znikał na papierze – teraz karmel jak „Hipnoterapia” */
.body:not(.white) .text-span-27 {
  background-color: var(--yms-gold-text);
}
/* ikony e-maila i Instagrama w kontakcie były bladozłote (prawie niewidoczne na papierze) – przyciemnione do karmelu */
.body:not(.white) .id-image {
  filter: brightness(.59) saturate(2.6);
}
/* link w odpowiedzi FAQ dziedziczy kolor akapitu (osadzony styl Webflow robił wszystkie linki czarne) */
.body:not(.white) .yms-faq-link {
  color: inherit;
}
.body:not(.white) .partnership-top,
.body:not(.white) .faq-item.dark {
  border-bottom-color: var(--yms-line);
}
.body:not(.white) .faq-wrap.dark,
.body:not(.white) .footer-bottom {
  border-top-color: var(--yms-line);
}
.body:not(.white) :is(.plus, .minus) {
  background-color: var(--yms-taupe);
}
.body:not(.white) :is(.cms-home-content-image, ._3rd-cms-home-link, .main-blog-link-wrapper) {
  border-color: var(--yms-line-strong);
}
.body:not(.white) .small-liine:not(.dark) {
  background-color: var(--yms-ink);
}
/* menu: po najechaniu napis robił się bladozłoty (kolor z trybu ciemnego) i znikał na papierze;
   osadzony styl Webflow ustawia ten kolor z !important */
.body:not(.white) .nav-link.icon-light:hover {
  color: var(--yms-caramel-deep) !important;
}
.body:not(.white) :is(.nav-link-underline, .nav-link-circle) {
  background-color: var(--yms-gold-text);
}
/* menu na telefonie: szare pozycje (#999 z osadzonego stylu Webflow) były słabo czytelne na beżu – ciepły taupe */
.body:not(.white) .menuitem-white {
  color: var(--yms-taupe) !important;
}
.body:not(.white) .menuitem-white :is(.italic-text, .text-span-25) {
  color: inherit;
}
/* bieżąca podstrona w menu: zamiast czarnej kreski karmelowa */
.body:not(.white) .menuitem-white.w--current {
  border-bottom-color: var(--yms-gold-text);
}
/* wyróżniony wpis na stronie głównej: zamiast jaskrawej brzoskwini ciepły krem, zaokrąglenie jak w sąsiednich kartach */
.body:not(.white) ._2nd-cms-details:not(.dark) {
  background-color: #F6E2C9;
  border: 1px solid rgba(150, 118, 84, .34);
  border-radius: 7px;
  box-shadow: 0 14px 28px -18px rgba(90, 60, 30, .4);
}
.body:not(.white) .text-feild.light {
  border-bottom-color: var(--yms-line-strong);
}
.body:not(.white) .footer-form-field:not(.dark) {
  border-color: var(--yms-line-strong);
}
/* pole zgody w formularzu: jasnoszara ramka była prawie niewidoczna, a po zaznaczeniu biały ptaszek
   na przezroczystym tle znikał – teraz ciepła ramka i ciemne pole z ptaszkiem, fokus bez niebieskiej poświaty */
.body:not(.white) .check-box-box {
  border-color: var(--yms-line-strong);
}
.body:not(.white) .check-box-box.w--redirected-checked {
  background-color: var(--yms-ink);
  border-color: var(--yms-ink);
  background-size: 62%;
}
.body:not(.white) .check-box-box.w--redirected-focus {
  box-shadow: 0 0 0 3px rgba(156, 104, 56, .3);
}
.body:not(.white) .um-w-wizyt--wrapper {
  border-color: rgba(156, 104, 56, .45);
}
/* przycisk „Umów wizytę” w hero: animacja Webflow po zjechaniu myszką zostawiała bladozłoty napis (kolor z trybu
   ciemnego), a po najechaniu dawała biały napis na bladozłotym kole – na papierze jedno i drugie prawie znikało.
   Animacja ustawia kolory w atrybucie style, stąd !important. */
.body:not(.white) .um-w-wizyt--wrapper .text-link.icon-dark-copy {
  color: var(--yms-caramel-deep) !important;
}
.body:not(.white) .um-w-wizyt--wrapper img[src*="right-arrow-secondary"] {
  filter: brightness(.59) saturate(2.6);
}
.body:not(.white) .um-w-wizyt--wrapper:not(.yms-cta-kolo):hover { /* nowy przycisk z pierścieniem ma własny efekt */
  background-color: var(--yms-caramel-deep) !important;
}
.body:not(.white) .um-w-wizyt--wrapper:hover .text-link.icon-dark-copy {
  color: #FBF1E4 !important;
}
.body:not(.white) .um-w-wizyt--wrapper:hover img[src*="right-arrow-secondary"] {
  filter: brightness(0) invert(1) sepia(.15);
}
.body:not(.white) .achiement-para {
  border-color: rgba(156, 104, 56, .42);
}
/* duże imię pod zdjęciem w hero było zimnoszare – teraz przejmuje ciepły ton papieru */
.body:not(.white) .hero-name-image {
  mix-blend-mode: multiply;
}
/* kropki pod suwakiem „O mnie”: zamiast zimnej szarości i czerni ciepły brąz */
.body:not(.white) .slide-nav .w-slider-dot {
  background-color: rgba(110, 91, 71, .28);
}
.body:not(.white) .slide-nav .w-slider-dot.w-active {
  background-color: var(--yms-ink);
}
.body:not(.white) ::selection {
  background: rgba(156, 104, 56, .22);
}

/* Opinie: Webflow dawał tekstowi stałą szerokość (926/896 px) i kontenerowi stałą wysokość (223 px) –
   na ekranach węższych niż ok. 1180 px tekst był ucinany z prawej strony. */
.size-24 {
  width: auto;
  max-width: 926px;
}
.testimonial-text-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}
.tabs-content-wrap {
  height: auto;
  min-height: 223px;
}
/* pionowa kreska przy numerach opinii miała height: 100% stałej wysokości – teraz rozciąga się na wysokość tekstu */
.tabs-content-wrap .line-show {
  height: auto;
  align-self: stretch;
}
/* numery opinii i pasek postępu w trybie jasnym: zamiast czerni i zimnej szarości atrament i ciepły taupe
   (osadzony styl Webflow ustawia kolory numerów z !important) */
.body:not(.white) .tab-link2 {
  color: var(--yms-taupe-soft) !important;
}
.body:not(.white) .tab-link2.w--current {
  color: var(--yms-ink) !important;
}
.body:not(.white) .line-show .line:is(._7, ._9, ._11) {
  background-color: var(--yms-ink);
}
.body:not(.white) .line-show .line:is(._8, ._10, ._12) {
  background-color: var(--yms-line);
}
/* Akapity wyrównane do lewej zamiast justowania (nierówne dziury między słowami) */
.blac.fix.omniee,
.blac._w-cer-copy,
.slider-desc,
.slider-para,
.slider-hidded-text,
.faq-p,
.fcqs-black,
.size-24 {
  text-align: left;
}
/* Pigułki z tematami pod hero: zwartsze, gdy tekst łamie się na dwa wiersze */
.achiement-para,
.achiement-para.size,
.achiement-para.inter {
  line-height: 1.45;
  padding-top: 7px;
  padding-bottom: 7px;
}
/* Widoczny obrys przy nawigacji klawiaturą */
.body :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--yms-gold-text);
  outline-offset: 3px;
}
.body.white :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline-color: #DBBD9A;
}

/* ===== Usprawnienia interfejsu (razem z /js/yms.js) ===== */

/* Intro z logo i paskiem (2 s) tylko przy pierwszym wejściu w czasie wizyty – klasę ustawia skrypt w <head> */
.yms-bez-intro .loading-wrapper {
  display: none !important;
}

/* Menu przyklejone do góry: przy przewijaniu w dół chowa się, przy przewijaniu w górę wraca z tłem papieru.
   Bez transform i backdrop-filter na samym menu – rozwijane menu na telefonie ma position: fixed
   i musi liczyć się od ekranu, dlatego tło jest w ::before. */
.navbar-compound {
  position: sticky;
  top: 0;
  transition: top .35s ease;
}
.navbar-compound.yms-menu-ukryte {
  top: -130px;
}
.navbar-compound::before {
  content: "";
  display: block; /* Webflow daje tu display: table (clearfix), a tabela nie rozciąga się do inset: 0 */
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.navbar-compound.yms-menu-tlo::before {
  opacity: 1;
}
.body:not(.white) .navbar-compound::before {
  background: rgba(243, 234, 223, .86);
  border-bottom: 1px solid rgba(110, 91, 71, .16);
  box-shadow: 0 12px 30px -26px rgba(60, 40, 20, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
.body.white .navbar-compound::before {
  background: rgba(31, 31, 31, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Telefon: pływający przycisk „Umów wizytę” (pokazuje go skrypt po minięciu przycisku w hero) */
.yms-cta-telefon {
  display: none;
}
@media screen and (max-width: 767px) {
  .yms-cta-telefon {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    padding: 15px 30px;
    border-radius: 999px;
    font: 600 15px/1 Montserrat, sans-serif;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 160%);
    pointer-events: none;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
  }
  .yms-cta-telefon.yms-widoczny {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
  .body:not(.white) .yms-cta-telefon {
    background: var(--yms-caramel-deep);
    color: #FBF1E4;
    box-shadow: 0 14px 30px -12px rgba(46, 32, 22, .55);
  }
  .body.white .yms-cta-telefon {
    background: #DBBD9A;
    color: #1F1F1F;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
  }
}

/* Karuzela „Rodzaje hipnoterapii”: strzałki pod kartami na komputerze */
.yms-karuzela-strzalki {
  display: none;
}
.yms-karuzela-pasek {
  margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
  .yms-karuzela-pasek {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }
  .yms-karuzela-pasek .text-block-16 {
    margin-bottom: 0;
  }
  .yms-karuzela-strzalki {
    display: flex;
    gap: 10px;
    position: absolute;
    right: 40px;
    top: 0;
  }
  .yms-karuzela-strzalki button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }
  .yms-karuzela-strzalki svg {
    width: 18px;
    height: 14px;
  }
  .yms-karuzela-strzalki .yms-strzalka-prev svg {
    transform: scaleX(-1);
  }
  .body:not(.white) .yms-karuzela-strzalki button {
    border: 1px solid rgba(110, 91, 71, .45);
    color: var(--yms-ink);
  }
  .body:not(.white) .yms-karuzela-strzalki button:hover {
    border-color: var(--yms-caramel-deep);
    background: var(--yms-caramel-deep);
    color: #FBF1E4;
  }
  .body.white .yms-karuzela-strzalki button {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #EBEBEB;
  }
  .body.white .yms-karuzela-strzalki button:hover {
    border-color: #DBBD9A;
    background: #DBBD9A;
    color: #1F1F1F;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-compound,
  .navbar-compound::before,
  .yms-cta-telefon {
    transition: none;
  }
}

/* „ł” w nagłówku „Współpraca”: Envegas nie ma tej litery (zastępcza z innego kroju wyglądałaby obco), więc widać
   „l” z Envegas z cienką ukośną kreską – grubości poprzeczki „t” – na 2/3 wysokości „x”. Prawdziwe „ł” zostaje
   w tekście (wyszukiwarki, czytniki ekranu, kopiowanie), ale ma rozmiar 0. Miary w em z pliku kroju (2048 jedn.). */
.yms-l {
  position: relative;
}
.yms-l::before {
  content: "l";
  content: "l" / "";
}
.yms-l > span {
  font-size: 0;
}
.yms-l::after {
  content: "";
  position: absolute;
  left: .101em; /* środek pnia „l” */
  top: .483em; /* od góry kroju (1549) do kreski (560 nad linią bazową) */
  width: .155em;
  height: max(1px, .0127em);
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-22deg);
}

/* ===== Współpraca: lista usług jako akordeon (na wzór BYQ Supply „Tabbed Service Accordion List”,
   bez zakładek i zdjęć). Numer w tej samej linii co nazwa, okrągły przycisk z plusem, po kliknięciu
   płynnie rozwija się opis i przycisk. Na starcie otwarta pierwsza pozycja (w HTML); klikanie obsługuje /js/yms.js. */
.yms-wsp {
  margin-top: 64px;
  border-top: 1px solid var(--yms-line);
}
.yms-wsp-pozycja {
  border-bottom: 1px solid var(--yms-line);
}
.yms-wsp-naglowek {
  margin: 0;
  font: inherit;
}
.yms-wsp-przycisk {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 30px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .35s ease;
}
.yms-wsp-nr {
  font: 300 22px/1 "Classy Coiffeur", Arial, sans-serif;
  letter-spacing: .04em;
  transition: color .35s ease;
}
.yms-wsp-tytul {
  font: 400 clamp(32px, 3.2vw, 46px)/1.08 "Envegas 0 Wyyp", Georgia, serif;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.yms-wsp-tytul .text-span-31 {
  font-size: .83em;
}
.yms-wsp-ikona {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: background-color .35s ease, border-color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.yms-wsp-ikona::before,
.yms-wsp-ikona::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 1.5px;
  transform: translate(-50%, -50%);
  transition: transform .4s ease, background-color .35s ease;
}
.yms-wsp-ikona::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona {
  transform: rotate(180deg);
}
.yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
  .yms-wsp-przycisk:hover .yms-wsp-tytul {
    transform: translateX(10px);
  }
}
/* płynne rozwijanie: wiersz siatki 0fr <-> 1fr */
.yms-wsp-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1);
}
/* zwinięte tylko z działającym JS (Webflow dodaje .w-mod-js do <html> już w <head>) – od pierwszego malowania, bez skoku */
.w-mod-js .yms-wsp-panel[data-zwiniety] {
  grid-template-rows: 0fr;
}
.yms-wsp-panel-tresc {
  min-height: 0;
  overflow: hidden;
  padding: 0 calc(48px + 24px + 12px) 0 calc(72px + 24px + 12px);
  opacity: 1;
  transition: opacity .45s ease;
}
.w-mod-js .yms-wsp-panel[data-zwiniety] .yms-wsp-panel-tresc {
  opacity: 0;
}
/* treść panelu: z lewej pierwsze zdanie (większe) i reszta opisu, z prawej najważniejsze fakty i przycisk.
   Tekst do lewej – justowanie robiło na stronie dziury między słowami. */
.yms-wsp-tekst,
.yms-wsp-bok {
  margin-bottom: 40px;
}
.yms-wsp-lead {
  max-width: 30em;
  margin: 0 0 18px;
  font: 300 clamp(18px, 1.85vw, 27px)/1.36 "Classy Coiffeur", Georgia, serif;
  text-wrap: pretty;
}
.yms-wsp-lead strong {
  font-weight: inherit;
}
.yms-wsp-lead:only-child {
  margin-bottom: 0;
}
.yms-wsp-opis {
  max-width: 58ch;
  margin: 0;
  font: 300 16px/1.8 Montserrat, sans-serif;
  text-wrap: pretty;
}
/* karta „W skrócie”: najważniejsze fakty z opisu i przycisk */
.yms-wsp-bok:has(.yms-wsp-fakty) {
  padding: 22px 24px 24px;
  border-radius: 8px;
}
.yms-wsp-skrot {
  margin: 0 0 6px;
  font: 600 11px/1 Montserrat, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.yms-wsp-fakty {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.yms-wsp-fakty li {
  position: relative;
  padding: 12px 0 12px 18px;
  font: 500 14px/1.45 Montserrat, sans-serif;
}
.yms-wsp-fakty li + li {
  border-top: 1px solid transparent;
}
.yms-wsp-fakty li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.yms-wsp-bok:has(.yms-wsp-fakty) .yms-wsp-cta {
  display: flex;
  justify-content: center;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .yms-wsp-panel-tresc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 0 72px;
    align-items: start;
  }
}
.yms-wsp-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 999px;
  font: 600 14px/1 Montserrat, sans-serif;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.yms-wsp-cta svg {
  width: 17px;
  height: 13px;
  transition: transform .3s ease;
}
.yms-wsp-cta:hover svg {
  transform: translateX(4px);
}

/* kolory: tryb jasny (papier) */
.body:not(.white) .yms-wsp-nr {
  color: var(--yms-gold-text);
}
.body:not(.white) .yms-wsp-tytul {
  color: var(--yms-ink);
}
.body:not(.white) .yms-wsp-ikona {
  border: 1px solid var(--yms-line-strong);
}
.body:not(.white) .yms-wsp-ikona::before,
.body:not(.white) .yms-wsp-ikona::after {
  background: var(--yms-ink);
}
.body:not(.white) .yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona {
  border-color: var(--yms-ink);
  background: var(--yms-ink);
}
.body:not(.white) .yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona::before,
.body:not(.white) .yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona::after {
  background: #FBF1E4;
}
.body:not(.white) .yms-wsp-opis {
  color: var(--yms-taupe);
}
.body:not(.white) .yms-wsp-lead {
  color: var(--yms-ink);
}
.body:not(.white) .yms-wsp-lead strong {
  color: var(--yms-gold-text);
}
.body:not(.white) .yms-wsp-bok:has(.yms-wsp-fakty) {
  border: 1px solid var(--yms-line);
  background: rgba(252, 247, 240, .6);
  box-shadow: 0 18px 36px -30px rgba(70, 45, 25, .45);
}
.body:not(.white) .yms-wsp-skrot {
  color: var(--yms-gold-text);
}
.body:not(.white) .yms-wsp-fakty li {
  color: var(--yms-ink);
}
.body:not(.white) .yms-wsp-fakty li + li {
  border-top-color: var(--yms-line);
}
.body:not(.white) .yms-wsp-fakty li::before {
  background: var(--yms-gold-text);
}
.body:not(.white) .yms-wsp-opis strong {
  color: var(--yms-ink);
  font-weight: 600;
}
.body:not(.white) .yms-wsp-cta {
  background: var(--yms-caramel-deep);
  color: #FBF1E4;
}
.body:not(.white) .yms-wsp-cta:hover {
  background: var(--yms-ink);
}

/* kolory: tryb ciemny */
.body.white .yms-wsp,
.body.white .yms-wsp-pozycja {
  border-color: rgba(255, 255, 255, .14);
}
.body.white .yms-wsp-nr {
  color: #DBBD9A;
}
.body.white .yms-wsp-tytul {
  color: #EBEBEB;
}
.body.white .yms-wsp-ikona {
  border: 1px solid rgba(255, 255, 255, .3);
}
.body.white .yms-wsp-ikona::before,
.body.white .yms-wsp-ikona::after {
  background: #EBEBEB;
}
.body.white .yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona {
  border-color: #DBBD9A;
  background: #DBBD9A;
}
.body.white .yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona::before,
.body.white .yms-wsp-przycisk[aria-expanded="true"] .yms-wsp-ikona::after {
  background: #1F1F1F;
}
.body.white .yms-wsp-opis {
  color: rgba(235, 235, 235, .78);
}
.body.white .yms-wsp-lead {
  color: #EBEBEB;
}
.body.white .yms-wsp-lead strong {
  color: #DBBD9A;
}
.body.white .yms-wsp-bok:has(.yms-wsp-fakty) {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
}
.body.white .yms-wsp-skrot {
  color: #DBBD9A;
}
.body.white .yms-wsp-fakty li {
  color: #EBEBEB;
}
.body.white .yms-wsp-fakty li + li {
  border-top-color: rgba(255, 255, 255, .14);
}
.body.white .yms-wsp-fakty li::before {
  background: #DBBD9A;
}
.body.white .yms-wsp-opis strong {
  color: #EBEBEB;
  font-weight: 600;
}
.body.white .yms-wsp-cta {
  background: #DBBD9A;
  color: #1F1F1F;
}
.body.white .yms-wsp-cta:hover {
  background: #EBEBEB;
}

@media screen and (max-width: 767px) {
  .yms-wsp {
    margin-top: 40px;
  }
  .yms-wsp-przycisk {
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    gap: 14px;
    padding: 22px 0;
  }
  .yms-wsp-nr {
    font-size: 18px;
  }
  .yms-wsp-tytul {
    font-size: 32px; /* nazwa usługi wyraźnie większa od pytania pod nią (Envegas ma niskie litery) */
  }
  .yms-wsp-ikona {
    width: 40px;
    height: 40px;
  }
  .yms-wsp-panel-tresc {
    padding: 0 0 0 48px;
  }
  .yms-wsp-tekst {
    margin-bottom: 22px;
  }
  .yms-wsp-bok {
    margin-bottom: 30px;
  }
  .yms-wsp-lead {
    font-size: 18px;
  }
  .yms-wsp-opis {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yms-wsp-panel,
  .yms-wsp-panel-tresc,
  .yms-wsp-tytul,
  .yms-wsp-ikona,
  .yms-wsp-ikona::before,
  .yms-wsp-ikona::after {
    transition: none;
  }
}

/* ===== Cytat zamiast paska z hasłami (marquee): jedno zdanie Dominiki z sekcji „O mnie”, szeryfem Classy Coiffeur
   (Envegas to wersja demo – przecinki i kropki ma zastąpione napisem „Demo”).
   Słowa rozjaśniają się po kolei w miarę przewijania (/js/yms.js); bez JS i przy ograniczonym ruchu – od razu całe. */
.yms-cytat {
  padding: 150px 0 140px;
}
.yms-cytat-wnetrze {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.yms-cytat-tekst {
  margin: 0;
  padding: 0;
  border: 0;
  font: 300 clamp(34px, 4.4vw, 64px)/1.22 "Classy Coiffeur", Georgia, serif;
  text-wrap: balance;
}
.yms-cytat-tekst p {
  margin: 0;
  font: inherit;
}
.yms-slowo {
  display: inline-block;
  transition: color .7s ease, filter .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.yms-slowo:not(.yms-slowo-jasne) {
  filter: blur(2px);
  transform: translateY(.12em);
}
.yms-cytat-podpis {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
  font: 500 13px/1 Montserrat, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.yms-cytat-podpis::before {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.body:not(.white) .yms-cytat-tekst {
  color: var(--yms-ink);
}
.body:not(.white) .yms-slowo:not(.yms-slowo-jasne) {
  color: rgba(46, 32, 22, .13);
}
.body:not(.white) .yms-cytat-podpis {
  color: var(--yms-gold-text);
}
.body.white .yms-cytat-tekst {
  color: #EBEBEB;
}
.body.white .yms-slowo:not(.yms-slowo-jasne) {
  color: rgba(235, 235, 235, .13);
}
.body.white .yms-cytat-podpis {
  color: #DBBD9A;
}
@media screen and (max-width: 767px) {
  .yms-cytat {
    padding: 90px 0 80px;
  }
  .yms-cytat-podpis {
    margin-top: 30px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yms-slowo {
    transition: none;
  }
}

/* Hero na dużych ekranach – delikatnie: od 1560 px imię, zdjęcie, przycisk i drobne teksty rosną najwyżej o ok. 12 %,
   a treść hero i pigułki z tematami zajmują część wolnego miejsca po bokach (szerzej o tyle samo). Imię dalej
   nachodzi na zdjęcie. Poniżej 1560 px wszystko jak w Webflow. */
@media screen and (min-width: 1560px) {
  .hero-section .container-large,
  .achievement-section .container-large {
    max-width: clamp(1280px, 82vw, 1434px);
  }
  .hero-section .heading-style-h1 {
    font-size: clamp(110px, 7.05vw, 123px);
    line-height: 1.2;
    margin-bottom: -.6em;
  }
  .hero-section .paragraph-2,
  .hero-content-data-3 .line-increase-2 {
    font-size: clamp(16px, 1.03vw, 18px);
  }
  .hero-content-data-3 {
    grid-template-columns: 1fr auto 1fr;
  }
  .hero-content-data-3 .hero-profile-image {
    width: clamp(387px, 24.8vw, 433px);
    max-width: none;
  }
  .hero-section .um-w-wizyt--wrapper {
    width: clamp(200px, 12.82vw, 224px);
    height: clamp(200px, 12.82vw, 224px);
  }
  .hero-section .um-w-wizyt--wrapper .text-link {
    font-size: clamp(18px, 1.15vw, 20px);
  }
}
/* Jasne imię pod zdjęciem: na komputerze prawie od krawędzi do krawędzi ekranu (szersze niż treść hero, jak znak wodny). */
@media screen and (min-width: 992px) {
  .hero_content-2 .hero-name-image {
    align-self: center;
    width: calc(100vw - 2 * clamp(24px, 2.6vw, 56px));
    max-width: 1840px;
  }
}

/* ===== Instagram zamiast kolażu: ten sam kontener co pozostałe sekcje (container-large _70rem), nagłówek jak
   „Blog” / „Kontakt”, obok link do profilu, siatka 6 zdjęć (4:5).
   Do czasu podłączenia konta pokazuje zdjęcia z dawnej sekcji; najnowsze posty wczyta /js/yms.js, gdy siatka dostanie
   w data-yms-instagram adres z postami (funkcja Netlify albo serwis typu Behold). */
.yms-insta {
  padding: 120px 0 110px;
}
.yms-insta-naglowek {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.yms-insta-tytul {
  margin: 0;
  font: 400 clamp(64px, 8.4vw, 120px)/1 "Envegas 0 Wyyp", Georgia, serif;
}
.yms-insta-profil,
.yms-insta-spotify a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 16px/1 Montserrat, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.yms-insta-profil {
  margin-bottom: 14px;
}
.yms-insta-profil svg,
.yms-insta-spotify svg {
  width: 16px;
  height: 12px;
  transition: transform .3s ease;
}
.yms-insta-profil:hover svg,
.yms-insta-spotify a:hover svg {
  transform: translateX(4px);
}
.yms-insta-siatka {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.yms-insta-siatka a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
}
.yms-insta-siatka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}
.yms-insta-ikona {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.yms-insta-ikona svg {
  width: 30px;
  height: 30px;
}
.yms-insta-siatka a:hover img,
.yms-insta-siatka a:focus-visible img {
  transform: scale(1.05);
}
.yms-insta-siatka a:hover .yms-insta-ikona,
.yms-insta-siatka a:focus-visible .yms-insta-ikona {
  opacity: 1;
}
.yms-insta-spotify {
  margin: 34px 0 0;
  font: 300 16px/1.5 Montserrat, sans-serif;
  text-align: center;
}
.body:not(.white) .yms-insta-tytul {
  color: var(--yms-ink);
}
.body:not(.white) .yms-insta-profil,
.body:not(.white) .yms-insta-spotify a {
  color: var(--yms-caramel-deep);
}
.body:not(.white) .yms-insta-spotify {
  color: var(--yms-taupe);
}
.body:not(.white) .yms-insta-siatka a {
  box-shadow: 0 18px 34px -28px rgba(70, 45, 25, .55);
}
.body:not(.white) .yms-insta-ikona {
  background: rgba(46, 32, 22, .38);
  color: #FBF1E4;
}
.body.white .yms-insta-tytul {
  color: #EBEBEB;
}
.body.white .yms-insta-profil,
.body.white .yms-insta-spotify a {
  color: #DBBD9A;
}
.body.white .yms-insta-spotify {
  color: rgba(235, 235, 235, .78);
}
.body.white .yms-insta-ikona {
  background: rgba(0, 0, 0, .45);
  color: #FBF1E4;
}
@media screen and (max-width: 991px) {
  .yms-insta-siatka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .yms-insta {
    padding: 80px 0 70px;
  }
  .yms-insta-naglowek {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 28px;
  }
  .yms-insta-profil {
    margin-bottom: 0;
  }
  .yms-insta-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yms-insta-siatka img,
  .yms-insta-ikona {
    transition: none;
  }
}


/* ===== Program „Zakorzeniona w sobie” – kluczowa oferta. Na stronie głównej (po „O mnie”) panel w kolorze atramentu
   (w trybie ciemnym jasny papier) z okładką z podstrony programu, liczbami i dwoma wejściami na podstronę; na stronie
   głównej i blogu PL cienki pasek nad menu. Teksty pochodzą z /pl/zakorzeniona-w-sobie. „Oferta premierowa” stoi
   w 3 miejscach (pasek, panel, plakietka w „Współpracy”) – po premierze trzeba ją zmienić albo usunąć. */
.yms-program {
  padding: clamp(32px, 5vw, 80px) clamp(12px, 2vw, 32px);
}
.yms-program-panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 2vw, 28px);
  padding-top: clamp(56px, 6.5vw, 112px);
}
.yms-program-wnetrze {
  width: min(1240px, 100% - 2 * clamp(22px, 7vw, 160px));
  margin: 0 auto;
}
.yms-program-siatka {
  display: grid;
  gap: 44px;
  align-items: center;
}
.yms-program-okladka {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  max-width: 560px;
  border-radius: 10px;
  clip-path: inset(0 0 0 0 round 10px);
}
.yms-program-okladka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
/* cienka ramka w środku okładki, jak na kartach „Rodzaje hipnoterapii” */
.yms-program-okladka::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(251, 241, 228, .45);
  border-radius: 4px;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .yms-program-okladka:hover img {
    transform: scale(1.035);
  }
}
.yms-program-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 26px;
  font: 600 11px/1 Montserrat, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.yms-premiera {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 11px;
  border-radius: 999px;
}
.yms-premiera::before,
.yms-pasek-kropka {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: yms-puls 2.4s ease-out infinite;
}
@keyframes yms-puls {
  0% {
    box-shadow: 0 0 0 0 rgba(219, 189, 154, .6);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(219, 189, 154, 0);
  }
}
.yms-program-tytul {
  margin: 0;
  font: 400 clamp(54px, 5.1vw, 84px)/.98 "Envegas 0 Wyyp", Georgia, serif;
}
.yms-program-tytul span {
  display: block;
}
.yms-program-hak {
  margin: 30px 0 12px;
  font: 300 clamp(23px, 1.8vw, 29px)/1.3 "Classy Coiffeur", Georgia, serif;
}
.yms-program-opis {
  max-width: 34em;
  margin: 0 0 34px;
  font: 300 16px/1.75 Montserrat, sans-serif;
  text-wrap: pretty;
}
.yms-program-liczby {
  display: grid;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
  border-top: 1px solid;
}
.yms-program-liczby li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  font: 400 13px/1.45 Montserrat, sans-serif;
  text-wrap: balance;
}
.yms-program-liczby li + li {
  border-top: 1px solid;
}
.yms-program-liczby strong {
  display: block;
  font: 300 40px/1 "Classy Coiffeur", Georgia, serif;
}
@media screen and (min-width: 1200px) {
  .yms-program-liczby {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr);
    padding-top: 22px;
  }
  .yms-program-liczby li {
    display: block;
    padding: 0 16px 0 0;
  }
  .yms-program-liczby li + li {
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid;
  }
  .yms-program-liczby strong {
    margin-bottom: 8px;
    font-size: clamp(44px, 3.4vw, 54px);
  }
}
.yms-program-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
}
.yms-program-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  border-radius: 999px;
  font: 600 15px/1 Montserrat, sans-serif;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.yms-program-cta svg {
  width: 17px;
  height: 13px;
  transition: transform .3s ease;
}
.yms-program-cta:hover svg {
  transform: translateX(4px);
}
.yms-program-link {
  font: 500 14px/1.4 Montserrat, sans-serif;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.yms-program-uwaga {
  margin: 24px 0 0;
  font: 400 12px/1.5 Montserrat, sans-serif;
  letter-spacing: .02em;
  text-wrap: pretty;
}
/* obszary pracy z podstrony (tam przewijają się w pasku pod okładką) */
.yms-program-obszary {
  margin: clamp(56px, 6vw, 96px) 0 0;
  padding: 22px 0 26px;
  text-align: center;
  text-wrap: balance;
  list-style: none;
  border-top: 1px solid;
  font: 500 11px/1.4 Montserrat, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.yms-program-obszary li {
  display: inline-block;
  margin: 6px 14px;
}
@media screen and (min-width: 992px) {
  .yms-program-siatka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(56px, 6vw, 104px);
  }
}

/* kolory: tryb jasny – panel w kolorze atramentu */
.body:not(.white) .yms-program-panel {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(70% 90% at 92% -10%, rgba(219, 189, 154, .17), transparent 60%),
    radial-gradient(60% 70% at -5% 110%, rgba(146, 97, 52, .26), transparent 62%),
    linear-gradient(160deg, #36261A, #2B1D13 55%, #241810);
  color: #FBF1E4;
  box-shadow: 0 50px 90px -60px rgba(46, 32, 22, .8);
}
.body:not(.white) .yms-program-okladka {
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .65);
}
.body:not(.white) .yms-program-gora {
  color: rgba(251, 241, 228, .72);
}
.body:not(.white) .yms-premiera {
  border: 1px solid rgba(219, 189, 154, .5);
  color: #DBBD9A;
}
.body:not(.white) .yms-program-tytul {
  color: #FBF1E4;
}
.body:not(.white) .yms-program-hak {
  color: #F1DFC8;
}
.body:not(.white) .yms-program-opis {
  color: rgba(251, 241, 228, .74);
}
.body:not(.white) .yms-program-liczby,
.body:not(.white) .yms-program-liczby li {
  border-color: rgba(251, 241, 228, .16);
}
.body:not(.white) .yms-program-liczby li {
  color: rgba(251, 241, 228, .7);
}
.body:not(.white) .yms-program-liczby strong {
  color: #DBBD9A;
}
.body:not(.white) .yms-program-cta {
  background: #FBF1E4;
  color: var(--yms-ink);
}
.body:not(.white) .yms-program-cta:hover {
  background: #DBBD9A;
}
.body:not(.white) .yms-program-link {
  color: #FBF1E4;
  text-decoration-color: rgba(251, 241, 228, .4);
}
.body:not(.white) .yms-program-link:hover {
  color: #DBBD9A;
  text-decoration-color: #DBBD9A;
}
.body:not(.white) .yms-program-uwaga {
  color: rgba(251, 241, 228, .58);
}
.body:not(.white) .yms-program-obszary {
  border-color: rgba(251, 241, 228, .12);
  color: rgba(219, 189, 154, .88);
}

/* kolory: tryb ciemny – panel z jasnego papieru */
.body.white .yms-program-panel {
  background:
    radial-gradient(70% 90% at 92% -10%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(160deg, #F6ECDF, #EADAC6);
  color: var(--yms-ink);
}
.body.white .yms-program-gora,
.body.white .yms-program-opis,
.body.white .yms-program-liczby li,
.body.white .yms-program-uwaga {
  color: var(--yms-taupe);
}
.body.white .yms-premiera {
  border: 1px solid rgba(111, 69, 33, .4);
  color: var(--yms-caramel-deep);
}
.body.white .yms-program-tytul,
.body.white .yms-program-hak {
  color: var(--yms-ink);
}
.body.white .yms-program-liczby,
.body.white .yms-program-liczby li {
  border-color: rgba(110, 91, 71, .28);
}
.body.white .yms-program-liczby strong,
.body.white .yms-program-obszary {
  color: var(--yms-caramel-deep);
}
.body.white .yms-program-obszary {
  border-color: rgba(110, 91, 71, .22);
}
.body.white .yms-program-cta {
  background: var(--yms-ink);
  color: #FBF1E4;
}
.body.white .yms-program-cta:hover {
  background: var(--yms-caramel-deep);
}
.body.white .yms-program-link {
  color: var(--yms-ink);
  text-decoration-color: rgba(46, 32, 22, .4);
}
.body.white .yms-program-link:hover {
  color: var(--yms-caramel-deep);
  text-decoration-color: var(--yms-caramel-deep);
}

/* płynne wejście: okładka odsłania się od środka, teksty po kolei (klasę dodaje /js/yms.js) */
@media (prefers-reduced-motion: no-preference) {
  .yms-program-okladka,
  .yms-program-tresc > * {
    transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1), clip-path 1.2s cubic-bezier(.2, .8, .2, 1);
  }
  .w-mod-js .yms-program:not(.yms-program-widoczny) .yms-program-okladka {
    opacity: 0;
    clip-path: inset(10% 10% 10% 10% round 10px);
  }
  .w-mod-js .yms-program:not(.yms-program-widoczny) .yms-program-tresc > * {
    opacity: 0;
    transform: translateY(24px);
  }
  .yms-program-tresc > :nth-child(2) { transition-delay: .06s; }
  .yms-program-tresc > :nth-child(3) { transition-delay: .12s; }
  .yms-program-tresc > :nth-child(4) { transition-delay: .18s; }
  .yms-program-tresc > :nth-child(5) { transition-delay: .24s; }
  .yms-program-tresc > :nth-child(6) { transition-delay: .3s; }
  .yms-program-tresc > :nth-child(7) { transition-delay: .36s; }
}
@media (prefers-reduced-motion: reduce) {
  .yms-premiera::before,
  .yms-pasek-kropka {
    animation: none;
  }
}

@media screen and (max-width: 991px) {
  .yms-program-okladka {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .yms-program {
    padding: 28px 10px;
  }
  .yms-program-panel {
    padding: 22px 0 44px;
    border-radius: 18px;
  }
  .yms-program-wnetrze {
    width: calc(100% - 44px);
  }
  .yms-program-siatka {
    gap: 34px;
  }
  /* „Zakorzeniona w sobie” w jednej linii: tekst ma ok. 8,1 × rozmiar czcionki szerokości,
     a kolumna to ekran minus 64px marginesów */
  .yms-program-tytul {
    font-size: min(56px, calc((100vw - 64px) / 8.5));
  }
  .yms-program-tytul span {
    display: inline;
  }
  .yms-program-hak {
    margin-top: 22px;
    font-size: 22px;
  }
  .yms-program-opis {
    margin-bottom: 28px;
    font-size: 15px;
  }
  .yms-program-liczby li {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .yms-program-liczby strong {
    font-size: 36px;
  }
  .yms-program-akcje {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    text-align: center;
  }
  .yms-program-cta {
    justify-content: center;
  }
  .yms-program-uwaga {
    text-align: center;
  }
  .yms-program-obszary {
    display: none;
  }
}

/* Plakietka przy programie w akordeonie „Współpraca” */
.yms-wsp-przycisk:has(.yms-wsp-plakietka) {
  padding-top: 52px;
}
.yms-wsp-przycisk:has(.yms-wsp-plakietka) .yms-wsp-tytul {
  position: relative;
}
.yms-wsp-plakietka {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  padding: 7px 12px 6px;
  border-radius: 999px;
  font: 600 10px/1 Montserrat, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.body:not(.white) .yms-wsp-plakietka {
  background: var(--yms-caramel-deep);
  color: #FBF1E4;
}
.body.white .yms-wsp-plakietka {
  background: #DBBD9A;
  color: #1F1F1F;
}
@media screen and (max-width: 767px) {
  .yms-wsp-przycisk:has(.yms-wsp-plakietka) {
    padding-top: 46px;
  }
}

/* Pasek nad menu z linkiem do programu; krzyżyk chowa go na tym urządzeniu (klasa .yms-bez-paska ze skryptu w <head>) */
.yms-pasek {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 56px;
  font: 500 13px/1.35 Montserrat, sans-serif;
  letter-spacing: .02em;
  text-align: center;
}
.yms-bez-paska .yms-pasek {
  display: none;
}
.yms-pasek-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  color: inherit;
  text-decoration: none;
}
.yms-pasek-premiera {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.yms-pasek-nazwa strong {
  font-weight: 600;
}
.yms-pasek-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid;
  font-weight: 600;
  transition: color .3s ease, border-color .3s ease;
}
.yms-pasek-cta svg {
  width: 14px;
  height: 11px;
  transition: transform .3s ease;
}
.yms-pasek-link:hover .yms-pasek-cta svg {
  transform: translateX(3px);
}
.yms-pasek-zamknij {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .72;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .25s ease, background-color .25s ease;
}
.yms-pasek-zamknij:hover {
  opacity: 1;
}
.yms-pasek-zamknij svg {
  width: 11px;
  height: 11px;
}
.body:not(.white) .yms-pasek,
.body:not(.white) .yms-pasek-link {
  background: var(--yms-ink);
  color: #FBF1E4;
}
.body:not(.white) .yms-pasek-premiera,
.body:not(.white) .yms-pasek-kropka {
  color: #DBBD9A;
}
.body:not(.white) .yms-pasek-cta {
  border-color: rgba(251, 241, 228, .45);
}
.body:not(.white) .yms-pasek-link:hover .yms-pasek-cta {
  border-color: #DBBD9A;
  color: #DBBD9A;
}
.body:not(.white) .yms-pasek-zamknij:hover {
  background: rgba(251, 241, 228, .1);
}
.body.white .yms-pasek,
.body.white .yms-pasek-link {
  background: #DBBD9A;
  color: #1F1F1F;
}
.body.white .yms-pasek-premiera,
.body.white .yms-pasek-kropka {
  color: #5A3A1E;
}
.body.white .yms-pasek-cta {
  border-color: rgba(31, 31, 31, .45);
}
.body.white .yms-pasek-zamknij:hover {
  background: rgba(31, 31, 31, .08);
}
.yms-pasek-krotki {
  display: none;
}
@media screen and (max-width: 767px) {
  .yms-pasek {
    justify-content: center;
    min-height: 40px;
    padding: 9px 46px; /* symetrycznie, żeby tekst stał na środku ekranu mimo krzyżyka po prawej */
    font-size: 12px;
    text-align: center;
  }
  .yms-pasek-link {
    justify-content: center;
    gap: 4px 9px;
  }
  .yms-pasek-dlugi {
    display: none;
  }
  /* jedna linia: „Premiera” zamiast „Oferta premierowa” (np. 375px: 268px treści na 283px miejsca) */
  .yms-pasek-krotki {
    display: inline;
  }
  .yms-pasek-link {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .yms-pasek-premiera {
    letter-spacing: .14em;
  }
  .yms-pasek-zamknij {
    right: 8px;
  }
}
/* najwęższe telefony: sama nazwa programu ze strzałką */
@media screen and (max-width: 359px) {
  .yms-pasek-premiera,
  .yms-pasek-kropka {
    display: none;
  }
}

/* Hero na komputerze mieści się w ekranie razem z rzędem haseł pod nim („Odzyskanie Pewności Siebie”…).
   Zdjęcie skaluje się także według wysokości okna: 390px + 7.6vw to stała część (pasek, menu, nagłówek,
   duże imię – rośnie z szerokością), .946 to proporcja szerokość/wysokość zdjęcia. Sprawdzone z paskiem
   „Oferta premierowa” na 1280×720, 1366×657, 1440×789/900, 1512×860, 1920×969/1080, 2560×1300. */
@media screen and (min-width: 992px) {
  .hero_content-2 {
    min-height: 0; /* Webflow: 548px, blokowało zmniejszanie hero */
  }
  .achievement-section .padding-section-large-70px {
    padding-top: clamp(16px, 2.2svh, 28px);
  }
  .hero-content-data-3 .hero-profile-image {
    width: max(200px, min(clamp(387px, 24.8vw, 433px), calc((100svh - 400px - 7.6vw) * .946)));
  }
}

/* Wejście hero – zamiast animacji Webflow (zdjęcie i środkowy rząd czekały 2,2 s przy każdej wizycie,
   a podtytuł i hasła animowały się niewidocznie pod intro). Jedna sekwencja < 1,5 s, startuje, gdy hero
   jest widoczne: przy kolejnych wizytach od razu, przy pierwszej po intro z logo (skrypt w <head>
   ustawia .yms-hero-czeka / .yms-hero-start). Opóźnienia w style="--yms-d" w HTML. */
.yms-hero-czeka .yms-wejscie {
  opacity: 0;
}
.yms-hero-start .yms-wejscie {
  animation: yms-wejscie .8s cubic-bezier(.22, .7, .2, 1) both;
  animation-delay: var(--yms-d, 0ms);
}
.yms-hero-start .hero-profile-image.yms-wejscie {
  animation-name: yms-wejscie-zdjecie;
  animation-duration: 1.1s;
}
@keyframes yms-wejscie {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes yms-wejscie-zdjecie {
  from { opacity: 0; transform: translateY(10px) scale(1.035); filter: blur(6px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yms-hero-czeka .yms-wejscie { opacity: 1; }
  .yms-hero-start .yms-wejscie { animation: none; }
}

/* Okrągły przycisk „Umów wizytę” w hero na telefonie i tablecie: tekst był ścieśniony do 40px (dwie linie
   wyrównane do lewej) ze strzałką z boku, więc całość stała krzywo w kole. Teraz napis w jednej linii
   na środku, strzałka pod nim – symetrycznie względem koła. */
@media screen and (max-width: 991px) {
  .hero-section .um-w-wizyt--wrapper {
    width: 132px;
    height: 132px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .hero-section .um-w-wizyt--wrapper .text-link {
    width: auto;
    max-width: none;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

/* Hero na telefonie – porządek typograficzny:
   - „Hipnoterapia • Mentoring • Neurohacking” jako mała linijka w wersalikach nad imieniem (jedna linia, środek);
   - podtytuł „Prowadzę kobiety…” kursywą szeryfową zamiast cienkiego Montserrata z podwójną interlinią
     (32px przy 16px) i przypadkowym łamaniem – teraz dwie zrównoważone linie jak hasło;
   - równy rytm odstępów: 14 / 16 / 26px. */
@media screen and (max-width: 767px) {
  .hero-section .para-color-2 .paragraph-2 {
    margin-bottom: 14px;
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .hero-section .para-color-2 .paragraph-2 .bold-700 {
    font-weight: 600;
  }
  .hero-section .heading-style-h1 {
    margin-bottom: 16px;
    line-height: 1.08;
  }
  .hero-content-data-3 .line-increase-2 {
    max-width: 19em;
    margin-inline: auto;
    font: italic 300 21px/1.4 var(--yms-serif-display);
    text-wrap: balance;
  }
  .hero-content-data-3 .hero-profile-image {
    margin-top: 26px;
  }
}
@media screen and (max-width: 359px) {
  .hero-section .para-color-2 .paragraph-2 {
    font-size: 9.5px;
    letter-spacing: .08em;
  }
}

/* Hasła pod hero na telefonie („Odzyskanie Pewności Siebie”…): zamiast pięciu pełnej szerokości obrysowanych
   „pigułek” (wyglądały jak przyciski, a nie są klikalne, i zajmowały cały ekran) – lista z cienkimi liniami
   i karmelową kropką, jak „W skrócie” we „Współpracy”. Na komputerze i tablecie pigułki zostają. */
@media screen and (max-width: 767px) {
  .achievement-section .achievement-grid {
    gap: 0;
    max-width: 320px;
    margin-inline: auto;
  }
  .achievement-section .achiement-para {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(156, 104, 56, .26);
    border-radius: 0;
    font-size: 15px;
  }
  .achievement-section .acheivement-card._1 .achiement-para {
    border-top: 1px solid rgba(156, 104, 56, .26);
  }
  .achievement-section .achiement-para::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9C6838;
  }
  /* jeden odcień dla wszystkich linii (ogólna reguła trybu jasnego dawała dolnym liniom .42) */
  .body:not(.white) .achievement-section .achiement-para,
  .body:not(.white) .achievement-section .acheivement-card._1 .achiement-para {
    border-color: rgba(156, 104, 56, .3);
  }
  .body.white .achievement-section .achiement-para,
  .body.white .achievement-section .acheivement-card._1 .achiement-para {
    border-color: rgba(219, 189, 154, .3);
  }
  .body.white .achievement-section .achiement-para::before {
    background: #DBBD9A;
  }
}

/* ===== Blog – strona wpisu (treść z tools/blog/wpisy.py, budowanie: python3 tools/blog/build.py) =====
   Styl redakcyjny jak reszta marki: tytuł w Envegas, śródtytuły szeryfowe, wąska kolumna do czytania,
   cytaty z karmelową kreską, ramka „Autorka” i „Czytaj także”. Kolory: jasny tryb karmel, ciemny złoto. */
.inner-hero-section .inner-detail-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.inner-hero-section .inner-title {
  max-width: 15em;
  margin: 0 auto;
  /* Noto Serif Display: Envegas zamienia cyfry i dwukropek w ozdobniki, Classy Coiffeur w dużym rozmiarze
     wygląda nierówno */
  font: 400 clamp(34px, 3.8vw, 54px)/1.12 var(--yms-serif-display);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.yms-wpis-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 22px 0 34px;
  font: 600 12px/1.4 Montserrat, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.inner-hero-section .inner-main-image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}
.inner-hero-section .inner-desc-1 {
  justify-content: center;
}
.blog-post.w-richtext {
  max-width: 680px;
  margin: 48px auto 0;
  font: 400 17px/1.8 Montserrat, sans-serif;
}
.blog-post.w-richtext p {
  margin: 0 0 1.15em;
}
.blog-post.w-richtext > p:first-child {
  font: italic 300 clamp(20px, 1.6vw, 23px)/1.55 var(--yms-serif-display);
}
.blog-post.w-richtext h2 {
  margin: 1.9em 0 .55em;
  font: 400 clamp(25px, 2.2vw, 31px)/1.22 var(--yms-serif-display);
}
.blog-post.w-richtext ul {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
}
.blog-post.w-richtext li {
  position: relative;
  margin: 0 0 .7em;
  padding-left: 22px;
}
.blog-post.w-richtext li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.blog-post.w-richtext strong {
  font-weight: 600;
}
.blog-post.w-richtext blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid;
  font: italic 300 clamp(21px, 1.9vw, 26px)/1.45 var(--yms-serif-display);
}
.blog-post.w-richtext a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Autorka + Czytaj także */
.yms-wpis-stopka {
  padding: 30px 0 90px;
}
.yms-autorka {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
  padding: 30px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.yms-autorka-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.yms-autorka-k,
.yms-czytaj-k {
  margin: 0 0 6px;
  font: 600 11px/1.4 Montserrat, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.yms-autorka-imie {
  margin: 0 0 8px;
  font: 400 28px/1.15 "Envegas 0 Wyyp", Georgia, serif;
}
.yms-autorka-opis {
  margin: 0 0 16px;
  font: 400 15px/1.7 Montserrat, sans-serif;
}
.yms-autorka-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.yms-autorka-cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font: 600 14px/1.2 Montserrat, sans-serif;
  text-decoration: none;
}
.yms-autorka-link {
  font: 500 14px/1.4 Montserrat, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yms-czytaj {
  max-width: 680px;
  margin: 44px auto 0;
}
.yms-czytaj-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.yms-czytaj-karta {
  display: block;
  color: inherit;
  text-decoration: none;
}
.yms-czytaj-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  transition: opacity .3s ease;
}
.yms-czytaj-karta:hover .yms-czytaj-img {
  opacity: .85;
}
.yms-czytaj-tekst {
  display: block;
  margin-top: 12px;
}
.yms-czytaj-data {
  display: block;
  margin-bottom: 4px;
  font: 500 12px/1.4 Montserrat, sans-serif;
  letter-spacing: .06em;
  opacity: .75;
}
.yms-czytaj-tytul {
  font: 400 20px/1.3 var(--yms-serif-display);
}
/* kolory */
.body:not(.white) .yms-wpis-meta,
.body:not(.white) .yms-autorka-k,
.body:not(.white) .yms-czytaj-k {
  color: #8A5A2E;
}
.body:not(.white) .blog-post.w-richtext blockquote {
  border-color: #9C6838;
}
.body:not(.white) .yms-autorka {
  border-color: rgba(156, 104, 56, .3);
}
.body:not(.white) .yms-autorka-cta {
  background: #4A3526;
  color: #FBF1E4;
}
.body:not(.white) .yms-autorka-cta:hover {
  background: #2E2016;
}
.body.white .yms-wpis-meta,
.body.white .yms-autorka-k,
.body.white .yms-czytaj-k {
  color: #DBBD9A;
}
.body.white .blog-post.w-richtext blockquote,
.body.white .yms-autorka {
  border-color: rgba(219, 189, 154, .4);
}
.body.white .yms-autorka-cta {
  background: #DBBD9A;
  color: #1F1F1F;
}
@media screen and (max-width: 767px) {
  .blog-post.w-richtext {
    margin-top: 32px;
    font-size: 16px;
  }
  .yms-wpis-meta {
    margin: 16px 0 24px;
    font-size: 11px;
  }
  .yms-autorka {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .yms-autorka-akcje {
    justify-content: center;
  }
  .yms-czytaj-lista {
    grid-template-columns: 1fr;
  }
}
/* Okładka programu jest kwadratowa i ma napisy – na poziomych kartach i w nagłówku wpisu pokazujemy ją
   w całości na tle papieru (jak okładkę książki), zamiast ucinać tytuł. */
img[src*="/zakorzeniona/okladka"]:is(.blog-main-image, .inner-main-image, .card-cms-image, ._3rd-cms-card-image, .yms-czytaj-img) {
  object-fit: contain;
  background: #E9DACA;
  object-position: center;
}

/* Lista bloga: karty z Webflow miały zdjęcie o wysokości 25vw (na tablecie ok. 120px) i tytuł bez rozmiaru
   (domyślne 42px między 480 a 991px). Teraz zdjęcie zawsze 3:2, tytuł w jednej skali,
   siatka 1 / 2 / 3 kolumny. */
.blog-main-image {
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 2;
}
.main-blog-title {
  font-size: clamp(21px, 1.7vw, 25px);
}
.main-blog-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (min-width: 1200px) {
  .main-blog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .main-blog-list {
    grid-template-columns: 1fr;
  }
}

/* ===== Blog – lista (/pl/blog, /en/blog) – odświeżony wygląd =====
   Nagłówek strony, filtry jako „pigułki”, karty bez ciężkich ramek (zdjęcie z zaokrągleniem, kategoria
   i data nad tytułem, „Czytaj artykuł →”), najnowszy wpis szeroko na komputerze.
   Tytuły: Noto Serif Display (fonty dokłada tools/blog/build.py). */
:root {
  --yms-serif-display: "Noto Serif Display", Georgia, "Times New Roman", serif;
}
.blog-page-wrapper {
  padding-top: clamp(28px, 5vw, 70px);
}
.yms-blog-naglowek {
  max-width: 760px;
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}
.yms-blog-tytul {
  margin: 0;
  font: 400 clamp(72px, 10vw, 140px)/1 "Envegas 0 Wyyp", Georgia, serif;
}
.yms-blog-lead {
  max-width: 32em;
  margin: 14px auto 0;
  font: italic 300 clamp(18px, 1.6vw, 22px)/1.55 var(--yms-serif-display);
  text-wrap: balance;
}
/* filtry kategorii – widoczne na każdym ekranie */
.blog-categories-filter-wrapper,
.blog-categories-filter-wrapper:lang(en) {
  display: block;
  margin: 0 0 clamp(34px, 4vw, 56px);
}
.collection-list-4 {
  justify-content: center;
  gap: 10px;
}
.filters2_item .w-checkbox.checkbox {
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.filters2_item .checkbox-label {
  font: 600 11px/1.2 Montserrat, sans-serif;
  letter-spacing: .14em;
  text-decoration: none;
  cursor: pointer;
}
.checkbox.fs-cmsfilter_active .checkbox-label {
  text-decoration: none;
}
.checkbox-icon-absolute,
.checkbox-icon-absolute.w--redirected-checked {
  border: 0;
  background: none;
}
/* wiersz „Wszystkie artykuły · N rezultatów” */
.allarticles-wrapper {
  align-items: baseline;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid;
}
.allarticles-wrapper .heading-3 {
  font: italic 400 clamp(22px, 2vw, 28px)/1.2 var(--yms-serif-display);
}
.allarticles-wrapper .text-block-11 {
  font: 500 13px/1.4 Montserrat, sans-serif;
  letter-spacing: .08em;
}
/* karty */
.main-blog-list {
  gap: clamp(34px, 3.4vw, 48px) clamp(20px, 2.2vw, 32px);
}
.main-blog-link-wrapper {
  display: flex;
  flex-direction: column;
  border: 0;
  background: none;
}
.main-blog-link-wrapper .blog-main-image {
  border-radius: 6px;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.main-blog-item {
  overflow: visible;
}
.main-blog-link-wrapper:hover .blog-main-image {
  filter: brightness(1.04) saturate(1.05);
}
.blog-main-content-wrapper {
  gap: 10px;
  padding: 18px 2px 0;
}
.blog-main-content-wrapper .collection-list-wrapper {
  display: block;
  order: -2; /* kategoria nad datą */
}
.blog-main-content-wrapper .text-block-12 {
  font: 600 11px/1.3 Montserrat, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.blog-main-date {
  order: -1;
  margin-top: -4px;
  font-size: 13px;
}
.main-blog-title {
  font: 400 clamp(22px, 1.75vw, 26px)/1.25 var(--yms-serif-display);
  letter-spacing: -.005em;
}
.main-blog-desc {
  font-size: 15px;
  line-height: 1.6;
}
.yms-karta-czytaj {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid;
  font: 600 13px/1.2 Montserrat, sans-serif;
  letter-spacing: .04em;
}
.yms-karta-czytaj svg {
  width: 14px;
  height: 11px;
  transition: transform .3s ease;
}
.main-blog-link-wrapper:hover .yms-karta-czytaj svg {
  transform: translateX(4px);
}
/* najnowszy wpis szeroko: zdjęcie obok tekstu */
@media screen and (min-width: 992px) {
  .main-blog-list .main-blog-item:first-child {
    grid-column: 1 / -1;
  }
  .main-blog-item:first-child .main-blog-link-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  .main-blog-item:first-child .blog-main-content-wrapper {
    padding: 0;
  }
  .main-blog-item:first-child .main-blog-title {
    font-size: clamp(30px, 2.8vw, 42px);
    line-height: 1.15;
  }
  .main-blog-item:first-child .main-blog-desc {
    font-size: 16px;
  }
}
/* kolory: jasny tryb */
.body:not(.white) .filters2_item .w-checkbox.checkbox {
  border-color: rgba(110, 91, 71, .35);
  color: var(--yms-ink);
}
.body:not(.white) .filters2_item .w-checkbox.checkbox:hover {
  border-color: var(--yms-ink);
}
.body:not(.white) .checkbox.fs-cmsfilter_active {
  background: #4A3526;
  border-color: #4A3526;
}
.body:not(.white) .checkbox.fs-cmsfilter_active .checkbox-label {
  color: #FBF1E4;
}
.body:not(.white) .allarticles-wrapper {
  border-color: var(--yms-line);
}
.body:not(.white) :is(.text-block-12, .yms-karta-czytaj) {
  color: #8A5A2E;
}
.body:not(.white) .main-blog-desc {
  color: var(--yms-taupe);
}
/* kolory: ciemny tryb */
.body.white .filters2_item .w-checkbox.checkbox {
  border-color: rgba(219, 189, 154, .4);
}
.body.white .checkbox.fs-cmsfilter_active {
  background: #DBBD9A;
  border-color: #DBBD9A;
}
.body.white .checkbox.fs-cmsfilter_active .checkbox-label {
  color: #1F1F1F;
}
.body.white .allarticles-wrapper {
  border-color: rgba(219, 189, 154, .3);
}
.body.white :is(.text-block-12, .yms-karta-czytaj) {
  color: #DBBD9A;
}
@media screen and (max-width: 767px) {
  .collection-list-4 {
    gap: 8px;
  }
  .filters2_item .w-checkbox.checkbox {
    padding: 8px 14px;
  }
  .filters2_item .checkbox-label {
    font-size: 10px;
    letter-spacing: .12em;
  }
}
/* ostatnia karta sama w rzędzie (pierwsza jest szeroka): też szeroko, obrazem w prawo, żeby siatka się domykała
   – 2 kolumny (992–1199px): karta o parzystym numerze; 3 kolumny (od 1200px): numer 3n+2 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .main-blog-list .main-blog-item:nth-child(2n):last-child:not(:first-child) {
    grid-column: 1 / -1;
  }
  .main-blog-item:nth-child(2n):last-child:not(:first-child) .main-blog-link-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  .main-blog-item:nth-child(2n):last-child:not(:first-child) .blog-main-content-wrapper {
    order: -1;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .main-blog-list .main-blog-item:nth-child(3n+2):last-child:not(:first-child) {
    grid-column: 1 / -1;
  }
  .main-blog-item:nth-child(3n+2):last-child:not(:first-child) .main-blog-link-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  .main-blog-item:nth-child(3n+2):last-child:not(:first-child) .blog-main-content-wrapper {
    order: -1;
    padding: 0;
  }
}

/* ===== Stopka (markup: tools/stopka.py) =====
   Trzy kolumny z podpisami: Nawigacja / Newsletter / Kontakt, pod nimi cienki pasek z prawami i linkami
   prawnymi. Linki 15px zamiast ~28px (łamały się „Polityka Prywatności”, „Rodzaje Hipnoterapii”),
   formularz z zaokrąglonym polem i przyciskiem zamiast rysowanej elipsy. */
.yms-stopka,
.yms-stopka-dol {
  max-width: 1180px;
  margin-inline: auto;
}
.yms-stopka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(36px, 4.5vw, 60px);
  font-family: Montserrat, sans-serif;
}
.yms-stopka-k {
  margin: 0 0 18px;
  font: 600 11px/1.3 Montserrat, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.yms-stopka-lista {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.yms-stopka-link {
  color: inherit;
  font: 400 15px/1.5 Montserrat, sans-serif;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s ease;
}
.yms-stopka-link:hover,
.yms-stopka-link:focus-visible {
  background-size: 100% 1px;
}
.yms-stopka-newsletter {
  text-align: center;
}
.yms-stopka-tytul {
  margin: 0;
  font: 400 clamp(26px, 2.4vw, 34px)/1.2 var(--yms-serif-display);
}
.yms-stopka-opis {
  max-width: 30em;
  margin: 10px auto 0;
  font: 400 15px/1.6 Montserrat, sans-serif;
}
.yms-stopka .footer-form {
  max-width: 440px;
  margin: 0 auto;
}
.yms-stopka .footer-form-container > div {
  flex: 1 1 auto; /* jasna wersja pola siedzi w dodatkowym divie, który się nie rozciągał */
  min-width: 0;
}
.yms-stopka .footer-form-block {
  gap: 10px;
  margin: 22px 0 0;
}
.yms-stopka .footer-form-field,
.yms-stopka .footer-form-field.dark {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: 1px solid;
  border-radius: 999px;
  background: transparent;
  font: 400 16px/1.2 Montserrat, sans-serif;
}
.yms-stopka .submit-button,
.yms-stopka .submit-button.dark {
  flex: none;
  width: auto;
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background-image: none;
  font: 600 14px/1 Montserrat, sans-serif;
  letter-spacing: .02em;
  transition: background-color .25s ease;
}
.yms-stopka .w-form-done,
.yms-stopka .w-form-fail {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  font: 500 14px/1.5 Montserrat, sans-serif;
  text-align: center;
}
.yms-stopka-zgoda {
  margin: 14px 0 0;
  font: 400 12.5px/1.5 Montserrat, sans-serif;
}
.yms-stopka-zgoda a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yms-stopka-dol a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}
.yms-stopka-dol a:hover,
.yms-stopka-dol a:focus-visible {
  text-decoration: underline;
}
.yms-stopka-kontakt {
  text-align: right;
}
.yms-stopka-kontakt .yms-stopka-lista {
  align-items: flex-end;
}
.yms-stopka-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid;
  border-radius: 999px;
  font: 600 14px/1.2 Montserrat, sans-serif;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.yms-stopka-dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 28px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 22px 0 6px;
  border-top: 1px solid;
  font: 400 12.5px/1.5 Montserrat, sans-serif;
}
.yms-stopka-dol p {
  margin: 0;
}
.yms-stopka-prawne {
  display: flex;
  gap: 22px;
}
/* kolory: tryb jasny */
.body:not(.white) .yms-stopka-k {
  color: #8A5A2E;
}
.body:not(.white) :is(.yms-stopka-opis, .yms-stopka-zgoda, .yms-stopka-dol) {
  color: var(--yms-taupe);
}
.body:not(.white) .yms-stopka .footer-form-field {
  border-color: var(--yms-line-strong);
  color: var(--yms-ink);
}
.body:not(.white) .yms-stopka .submit-button {
  background-color: #4A3526;
  color: #FBF1E4;
}
.body:not(.white) .yms-stopka .submit-button:hover {
  background-color: #2E2016;
}
.body:not(.white) .yms-stopka-cta {
  border-color: var(--yms-ink);
  color: var(--yms-ink);
}
.body:not(.white) .yms-stopka-cta:hover {
  background-color: var(--yms-ink);
  color: #FBF1E4;
}
.body:not(.white) .yms-stopka-dol {
  border-color: var(--yms-line);
}
.body:not(.white) .yms-stopka .w-form-done {
  background: rgba(156, 104, 56, .12);
  color: var(--yms-ink);
}
/* kolory: tryb ciemny */
.body.white .yms-stopka-k {
  color: #DBBD9A;
}
.body.white :is(.yms-stopka-opis, .yms-stopka-zgoda, .yms-stopka-dol) {
  color: rgba(255, 255, 255, .7);
}
.body.white .yms-stopka .footer-form-field {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.body.white .yms-stopka .submit-button {
  background-color: #DBBD9A;
  color: #1F1F1F;
}
.body.white .yms-stopka-cta {
  border-color: #DBBD9A;
  color: #DBBD9A;
}
.body.white .yms-stopka-cta:hover {
  background-color: #DBBD9A;
  color: #1F1F1F;
}
.body.white .yms-stopka-dol {
  border-color: rgba(255, 255, 255, .18);
}
/* tablet: newsletter na całą szerokość, pod nim nawigacja i kontakt obok siebie */
@media screen and (max-width: 991px) {
  .yms-stopka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .yms-stopka-newsletter {
    grid-column: 1 / -1;
    order: -1;
  }
}
/* telefon: zwarta stopka (była ok. 1100px, teraz ok. 650px) – newsletter z przyciskiem w polu,
   nawigacja i kontakt jako zawijane wiersze bez podpisów, sekcje oddzielone cienką linią,
   dolny pasek w dwóch drobnych linijkach */
@media screen and (max-width: 767px) {
  .footer-light {
    padding-top: 28px;
  }
  .yms-stopka {
    grid-template-columns: minmax(0, 1fr); /* samo 1fr nie schodzi poniżej szerokości pola newslettera – na 320px strona jeździła na boki */
    gap: 0;
    margin-top: 26px;
    text-align: center;
  }
  .yms-stopka > * {
    padding: 22px 0;
  }
  .yms-stopka-newsletter {
    padding-top: 0;
  }
  .yms-stopka-nawigacja,
  .yms-stopka-kontakt {
    border-top: 1px solid;
    text-align: center;
  }
  .yms-stopka-nawigacja .yms-stopka-k,
  .yms-stopka-kontakt .yms-stopka-k {
    display: none;
  }
  .yms-stopka-tytul {
    font-size: 24px;
  }
  .yms-stopka-opis {
    margin-top: 6px;
    font-size: 14px;
  }
  .yms-stopka .footer-form-block,
  .yms-stopka .footer-form-block.icon-dark {
    position: relative;
    flex-direction: row;
    gap: 0;
    margin-top: 16px;
  }
  .yms-stopka .footer-form-field,
  .yms-stopka .footer-form-field.dark {
    flex: 1;
    height: 50px;
    padding-right: 128px; /* miejsce na przycisk w polu */
  }
  .yms-stopka .submit-button,
  .yms-stopka .submit-button.dark {
    position: absolute;
    top: 4px;
    right: 4px;
    height: 42px;
    padding: 0 20px;
  }
  .yms-stopka-zgoda {
    margin-top: 10px;
    font-size: 11.5px;
  }
  .yms-stopka :is(.yms-stopka-nawigacja, .yms-stopka-kontakt) .yms-stopka-lista {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 20px;
  }
  .yms-stopka-link {
    font-size: 14px;
  }
  .yms-stopka-ig {
    display: none;
  }
  .yms-stopka-cta {
    margin-top: 16px;
    padding: 11px 20px;
    font-size: 13px;
  }
  .yms-stopka-dol {
    justify-content: center;
    gap: 6px 18px;
    margin-top: 0;
    padding: 16px 0 4px;
    font-size: 11.5px;
    text-align: center;
  }
  .yms-stopka-prawa {
    flex-basis: 100%;
  }
  .yms-stopka-prawne {
    gap: 16px;
  }
  .body:not(.white) :is(.yms-stopka-nawigacja, .yms-stopka-kontakt) {
    border-color: var(--yms-line);
  }
  .body.white :is(.yms-stopka-nawigacja, .yms-stopka-kontakt) {
    border-color: rgba(255, 255, 255, .18);
  }
}
/* Webflow nadaje akapitom 16px na telefonie – drobny tekst dolnego paska ma dziedziczyć rozmiar */
.yms-stopka-dol p {
  font-size: inherit;
  line-height: inherit;
}


/* Okrągły przycisk „Umów wizytę” w hero: obracający się pierścień z napisem
   („UMÓW WIZYTĘ • HIPNOTERAPIA • MENTORING •”) wokół ciemnego koła ze strzałką – w duchu obracającego się
   „scroll down” ze strony. Po najechaniu koło lekko rośnie, strzałka obraca się w ↗, wewnętrzny okrąg
   się rozszerza. Zamiast dawnego obrysu, który po najechaniu nagle zalewał się brązem. */
.hero-section .um-w-wizyt--wrapper.yms-cta-kolo {
  position: relative;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  width: clamp(190px, 13.5vw, 232px);
  height: clamp(190px, 13.5vw, 232px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}
.body:not(.white) .hero-section .um-w-wizyt--wrapper.yms-cta-kolo,
.body:not(.white) .hero-section .um-w-wizyt--wrapper.yms-cta-kolo:hover,
.body.white .hero-section .um-w-wizyt--wrapper.yms-cta-kolo,
.body.white .hero-section .um-w-wizyt--wrapper.yms-cta-kolo:hover {
  border: 0;
  background: none;
}
.yms-cta-kolo::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px solid;
  border-radius: 50%;
  opacity: .45;
  transition: inset .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
.yms-cta-pierscien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: yms-obrot 22s linear infinite;
}
.yms-cta-pierscien text {
  font: 600 13px/1 Montserrat, sans-serif;
  letter-spacing: .12em;
}
.yms-cta-srodek {
  position: relative;
  grid-area: 1 / 1;
  place-self: center;
  display: grid;
  place-items: center;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.yms-cta-srodek svg {
  width: 34%;
  height: 34%;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
/* po najechaniu: koło rośnie i wypełnia wnętrze pierścienia (48% -> ok. 64%), wokół pojawia się ciepła poświata,
   po kole przesuwa się błysk światła, strzałka obraca się z ↗ na →; pierścień z napisem zostaje widoczny. */
.yms-cta-srodek {
  overflow: hidden;
}
.yms-cta-srodek::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 228, .38) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.link-blok-button:hover .yms-cta-srodek,
.link-blok-button:focus-visible .yms-cta-srodek {
  transform: scale(1.33);
  transition-duration: .6s;
}
.link-blok-button:hover .yms-cta-srodek::after,
.link-blok-button:focus-visible .yms-cta-srodek::after {
  transform: translateX(120%);
  transition: transform .9s cubic-bezier(.3, .6, .2, 1) .1s;
}
.link-blok-button:hover .yms-cta-srodek svg,
.link-blok-button:focus-visible .yms-cta-srodek svg {
  transform: rotate(45deg) scale(.9);
}
.link-blok-button:hover .yms-cta-kolo::before,
.link-blok-button:focus-visible .yms-cta-kolo::before {
  inset: 14%;
  opacity: 0;
}
.yms-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@keyframes yms-obrot {
  to {
    transform: rotate(360deg);
  }
}
/* kolory */
.body:not(.white) .yms-cta-pierscien text {
  fill: #6F4521;
}
.body:not(.white) .yms-cta-kolo::before {
  border-color: rgba(110, 91, 71, .8);
}
.body:not(.white) .yms-cta-srodek {
  background: radial-gradient(circle at 35% 30%, #6B4C35, #3E2B1F 70%);
  color: #FBF1E4;
  box-shadow: 0 18px 34px -16px rgba(62, 43, 31, .65), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.body:not(.white) :is(.link-blok-button:hover, .link-blok-button:focus-visible) .yms-cta-srodek {
  box-shadow: 0 0 0 7px rgba(156, 104, 56, .14), 0 0 34px 6px rgba(201, 150, 96, .35),
    0 26px 46px -16px rgba(62, 43, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.body:not(.white) :is(.link-blok-button:hover, .link-blok-button:focus-visible) .yms-cta-pierscien text {
  fill: #4A2E15;
}
.body.white :is(.link-blok-button:hover, .link-blok-button:focus-visible) .yms-cta-srodek {
  box-shadow: 0 0 0 7px rgba(219, 189, 154, .16), 0 0 36px 8px rgba(219, 189, 154, .35), 0 18px 34px -16px rgba(0, 0, 0, .7);
}
.yms-cta-pierscien text {
  transition: fill .4s ease;
}
.body.white .yms-cta-pierscien text {
  fill: #DBBD9A;
}
.body.white .yms-cta-kolo::before {
  border-color: rgba(219, 189, 154, .8);
}
.body.white .yms-cta-srodek {
  background: radial-gradient(circle at 35% 30%, #EBD3B2, #C9A57A 70%);
  color: #1F1F1F;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .7);
}
/* telefon i tablet: trochę mniejszy */
@media screen and (max-width: 991px) {
  .hero-section .um-w-wizyt--wrapper.yms-cta-kolo {
    width: 158px;
    height: 158px;
  }
  .yms-cta-pierscien text {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yms-cta-pierscien {
    animation: none;
  }
  .yms-cta-srodek::after {
    display: none;
  }
}

/* Hero – hasło „Prowadzę kobiety do miłości własnej…”: szeryfowa kursywa (Noto Serif Display, jak tytuły bloga)
   zamiast cienkiego Montserrata z podwójną interlinią, zrównoważone łamanie, „miłości własnej” w karmelu,
   krótka karmelowa kreska nad hasłem. */
.hero-content-data-3 .line-increase-2 {
  max-width: 13.5em;
  font: italic 300 clamp(22px, 1.75vw, 28px)/1.38 var(--yms-serif-display);
  letter-spacing: -.005em;
  text-wrap: balance;
}
.hero-content-data-3 .line-increase-2::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 18px;
  background: currentColor;
  opacity: .45;
}
.yms-akcent {
  font-style: italic;
}
.body:not(.white) .yms-akcent {
  color: #8A5A2E;
}
.body.white .yms-akcent {
  color: #DBBD9A;
}
/* Webflow dawał hasłu margines w em – przy większej czcionce urósł do ok. 140px i rozpychał hero;
   na komputerze hasło wyśrodkowane w rzędzie, na tej samej wysokości co przycisk „Umów wizytę” */
@media screen and (min-width: 992px) {
  .hero-content-data-3 .line-increase-2 {
    align-self: center;
    margin: 0;
  }
  /* środkowy blok hero (imię, zdjęcie, hasło, przycisk, duże imię) o 18px wyżej, a linijka
     „Hipnoterapia • Mentoring • Neurohacking” i pasek pięciu haseł zostają w miejscu:
     o tyle mniej odstępu pod linijką, o tyle więcej nad paskiem */
  .hero-section .para-color-2 {
    margin-bottom: 39px; /* Webflow: 57px */
  }
  .achievement-section .padding-section-large-70px {
    padding-top: calc(clamp(16px, 2.2svh, 28px) + 18px);
  }
}
@media screen and (max-width: 767px) {
  .hero-content-data-3 .line-increase-2::before {
    margin: 0 auto 14px;
  }
}

/* Pięć haseł pod hero (komputer i tablet): zamiast obrysowanych „pigułek”, które wyglądały jak przyciski –
   jeden pasek z cienką linią nad i pod, hasła rozdzielone karmelowymi kropkami (na telefonie: lista). */
@media screen and (min-width: 768px) {
  .achievement-section .achievement-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 0;
    max-width: 1180px;
    margin-inline: auto;
    padding: 12px 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
  .achievement-section .acheivement-card {
    position: relative;
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    gap: 0;
  }
  .achievement-section .achievement-grid .achiement-para {
    padding: 0 clamp(12px, 1.15vw, 17px);
    border: 0;
    border-radius: 0;
    font: 400 clamp(12.5px, .95vw, 13.5px)/1.4 Montserrat, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .achievement-section .acheivement-card + .acheivement-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2.5px;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
  }
  .body:not(.white) .achievement-section .achievement-grid {
    border-color: rgba(110, 91, 71, .3);
  }
  .body:not(.white) .achievement-section .acheivement-card + .acheivement-card::before {
    background: #9C6838;
  }
  .body.white .achievement-section .achievement-grid {
    border-color: rgba(219, 189, 154, .3);
  }
  .body.white .achievement-section .acheivement-card + .acheivement-card::before {
    background: #DBBD9A;
  }
}

/* Nagłówek „O mnie” (EN „About me”) nad sekcją o Dominice – w stylu „Certificate IHH”: Envegas,
   karmelowe słowo, nachodzi na górę zdjęcia (ujemny dolny margines z klasy Webflow).
   position: relative + z-index, żeby słowo leżało na zdjęciu; inset zerujemy, bo klasa .eva ma przesunięcia
   przeznaczone dla innego wariantu nagłówka. */
.heading-150px.eva.black.yms-o-mnie {
  position: relative;
  z-index: 5;
  inset: auto;
  margin-top: 0;
}

/* Na tablecie i telefonie ta sama kompozycja co na komputerze (Webflow wyłączał tu nachodzenie, a napis był mały):
   „O mnie” 80px, zdjęcie zaczyna się w połowie wysokości liter, „O” stoi obok zdjęcia (zdjęcie odsunięte o szerokość „O”,
   62px), „mnie” leży na zdjęciu; zdjęcie kończy się równo z kolumną tekstu, kółko „scroll down” przy lewym dolnym rogu
   jak na komputerze. Slider z tekstem dostaje wysokość z treści – na wąskich telefonach stała wysokość ucinała koniec
   tekstu. */
@media (max-width: 991px) {
  .heading-150px.eva.black.yms-o-mnie {
    font-size: var(--yms-h2);
    line-height: 1.375;
    margin-bottom: -.7em;
  }
  #omani-section .manio-grid {
    gap: 0;
  }
  #omani-section .omina-content-wrapper {
    align-self: flex-start;
    width: auto;
    max-width: 340px;
    height: auto;
    margin-left: 62px;
    padding-bottom: 47px;
  }
  #omani-section .slider-newimage {
    width: 100%;
    height: auto;
  }
  #omani-section .scroll-down {
    inset: auto auto -38px -40px;
  }
  #omani-section .omnie-data-wrapper,
  #omani-section .w-slider,
  #omani-section .w-slider-mask {
    height: auto;
    min-height: 0;
  }
}

/* „Certificate IHH” na tablecie i telefonie jak na komputerze: napis w jednej linii, tak duży, jak pozwala szerokość
   (cały napis to ok. 5,3 wysokości liter, maks. 80px), zdjęcie zaczyna się w połowie wysokości liter, odsunięte o „Ce”
   (0,6 wysokości liter) i kończy się z końcem słowa „Certificate” – „IHH” zostaje na tle, nie na ciemnej roślinie
   ze zdjęcia. inset: auto, bo klasa .eva ma przesunięcia dla innego wariantu nagłówka. Certyfikat przyklejony do dołu
   zdjęcia zamiast stałej odległości od góry. */
@media (max-width: 991px) {
  #slider .certificate-grid {
    --yms-cert: clamp(48px, calc((100vw - 48px) / 5.3), 80px);
  }
  #slider .certificate-grid .heading-150px.eva.black {
    position: relative;
    z-index: 5;
    inset: auto;
    font-size: var(--yms-cert);
    line-height: 1.375;
    margin-bottom: -.7em;
    white-space: nowrap;
  }
  #slider .certificate-grid > .certificate-content-wrapper:not(.pd-button) {
    margin-left: calc(var(--yms-cert) * .6);
  }
  #slider .cert-image {
    width: calc(var(--yms-cert) * 3.05);
    max-width: none;
    height: auto;
  }
  #slider .certicate-image {
    top: auto;
  }
}

/* tryb ciemny (EN): biały napis leży na jasnej ścianie zdjęcia – delikatny cień oddziela litery od tła
   (filter, bo karmelowe słowo ma wypełnienie przez background-clip i zwykły text-shadow by je zaciemnił) */
.body.white .heading-150px.eva.black.yms-o-mnie,
.body.white #slider .heading-150px.eva.black {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)) drop-shadow(0 3px 16px rgba(0, 0, 0, .5));
}

/* Obracający się pierścień „Umów wizytę” ma kwadratowe pole: przy obrocie jego rogi wychodziły poza ekran
   (na szerokości 480–767px strona drgała na boki o kilka pikseli). clip nie tworzy przewijanego kontenera,
   więc menu przyklejone do góry działa dalej. */
.hero-section {
  overflow-x: clip;
}

/* Sekcja „O mnie” bliżej hero: Webflow dawał 86px górnego odstępu, a z dolnym marginesem paska haseł
   i wysoką linią nagłówka wychodziło ~210px pustki. */
.omaine-section._60px { padding-top: 24px; }
@media (min-width: 992px) {
  .omaine-section._60px { padding-top: 0; }
}

/* Rytm odstępów między sekcjami strony głównej. Mierzone od ostatniego widocznego elementu jednej sekcji
   do pierwszego następnej: komputer 160px (wokół cytatu 180px), tablet 120px (140px), telefon 88px (~100px).
   Webflow miał tu przypadkowe wartości od ~50 do ~300px. */
@media (min-width: 992px) {
  #slider .padding-section-medium.pd-inc.padding-reduce { padding-top: 115px; }
  #partnership .padding-section-medium-copy { padding-top: 49px; padding-bottom: 106px; }
  .program-section.pd-low .padding-section-medium._4rem { padding-bottom: 34px; }
  .blog-home-section { margin-top: 0; }
  section.yms-cytat { padding-top: 101px; padding-bottom: 80px; }
  #faq-section .padding-section-small-copy._44 { padding-top: 101px; }
  section.yms-insta { padding-top: 85px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  #slider .padding-section-medium.pd-inc.padding-reduce { padding-top: 97px; }
  #slider .certificate-section { margin-bottom: 44px; }
  #partnership .padding-section-medium-copy { padding-bottom: 114px; }
  .program-section.pd-low .padding-section-medium._4rem { padding-bottom: 41px; }
  section.yms-cytat { padding-top: 141px; padding-bottom: 134px; }
  section.yms-insta { padding-top: 43px; padding-bottom: 60px; }
  #contact .padding-section-medium._6top { padding-top: 56px; }
}
@media (max-width: 767px) {
  #slider .padding-section-medium.pd-inc.padding-reduce { padding-top: 43px; }
  .blog-home-wrapper { padding-top: 26px; }
  section.yms-cytat { padding-top: 61px; padding-bottom: 65px; }
  section.yms-insta { padding-top: 51px; padding-bottom: 45px; }
  #contact .padding-section-medium._6top { padding-top: 40px; }
}

/* Program na stronie głównej mieści się w jednym ekranie komputera. Odstępy i okładka zależą od wysokości okna
   (svh): przy 900px panel ma ~780px; mieści się od ~720px. */
@media (min-width: 992px) {
  .yms-program-panel { padding-top: clamp(40px, 7svh, 94px); }
  .yms-program-obszary { margin-top: clamp(28px, 5svh, 86px); padding: 16px 0 18px; }
  .yms-program-okladka { max-width: min(560px, 100svh - 360px); justify-self: center; }
  .yms-program-tytul { font-size: min(5.1vw, 84px, 8.4svh); }
  .yms-program-gora { margin-bottom: clamp(14px, 2.4svh, 26px); }
  .yms-program-hak { margin-top: clamp(16px, 2.6svh, 30px); }
  .yms-program-opis { margin-bottom: clamp(18px, 3svh, 34px); }
  .yms-program-liczby { margin-bottom: clamp(20px, 3.4svh, 38px); }
  .yms-program-uwaga { margin-top: clamp(14px, 2.2svh, 24px); }

}
/* Mały laptop: szersza kolumna tekstu i liczby w trzech kolumnach, żeby panel nie urósł do ~910px */
@media (min-width: 992px) and (max-width: 1199px) {
  .yms-program-wnetrze { width: calc(100% - 96px); }
  .yms-program-siatka { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
  .yms-program-liczby { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 18px; }
  .yms-program-liczby li { display: block; padding: 0 12px 0 0; font-size: 12px; }
  .yms-program-liczby li + li { padding-left: 14px; border-top: 0; border-left: 1px solid; }
  .yms-program-liczby strong { margin-bottom: 6px; font-size: 40px; }
}

/* ===== FAQ: akordeon w stylu „Współpracy” (HTML generuje tools/faq.py, klikanie /js/yms.js).
   Numer w karmelu, pytanie szeryfem Noto Serif Display (zamiast ciężkiego pogrubionego Montserrata),
   okrągła ikona z plusem, który po otwarciu zamienia się w minus, płynne rozwijanie odpowiedzi.
   Lewa kolumna (nagłówek, opis, przycisk) zostaje na miejscu podczas przewijania listy. */
.yms-faq {
  border-top: 1px solid var(--yms-line);
}
.yms-faq-pozycja {
  border-bottom: 1px solid var(--yms-line);
}
.yms-faq-naglowek {
  margin: 0;
  font: inherit;
}
.yms-faq-przycisk {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.yms-faq-nr {
  font: 300 17px/1 "Classy Coiffeur", Georgia, serif;
  letter-spacing: .04em;
}
.yms-faq-pytanie {
  font: 400 clamp(18px, 1.35vw, 22px)/1.3 var(--yms-serif-display);
  letter-spacing: -.005em;
  text-wrap: pretty;
  transition: color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.yms-faq-ikona {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background-color .35s ease, border-color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.yms-faq-ikona::before,
.yms-faq-ikona::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  transform: translate(-50%, -50%);
  transition: transform .4s ease, background-color .35s ease;
}
.yms-faq-ikona::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona {
  transform: rotate(180deg);
}
.yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
  .yms-faq-przycisk:hover .yms-faq-pytanie {
    transform: translateX(6px);
  }
}
.yms-faq-przycisk:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.yms-faq-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1);
}
.w-mod-js .yms-faq-panel[data-zwiniety] {
  grid-template-rows: 0fr;
}
.yms-faq-tresc {
  min-height: 0;
  overflow: hidden;
  padding: 0 52px 0 52px; /* do lewej krawędzi pytania: 4px + numer 34px + odstęp 14px */
  transition: opacity .45s ease;
}
.w-mod-js .yms-faq-panel[data-zwiniety] .yms-faq-tresc {
  opacity: 0;
}
.yms-faq-tresc .faq-p {
  max-width: 40em;
  margin: 0 0 14px;
  font: 400 15px/1.8 Montserrat, sans-serif;
  opacity: 1;
  text-wrap: pretty;
}
.yms-faq-tresc > :last-child {
  margin-bottom: 22px;
}
.yms-faq-kontakt {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font: 600 14px/1 Montserrat, sans-serif;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.yms-faq-kontakt svg {
  width: 17px;
  height: 13px;
  transition: transform .3s ease;
}
.yms-faq-kontakt:hover svg {
  transform: translateX(4px);
}
@media (min-width: 992px) {
  #faq-section .flex-vertical {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}
/* mniejszy laptop: więcej miejsca dla listy, żeby pytania nie łamały się na dwa wiersze */
@media (min-width: 992px) and (max-width: 1279px) {
  #faq-section .grid_2-1 {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.35fr);
    column-gap: 56px;
  }
}

/* kolory: tryb jasny (papier) */
.body:not(.white) .yms-faq,
.body:not(.white) .yms-faq-pozycja {
  border-color: var(--yms-line);
}
.body:not(.white) .yms-faq-nr {
  color: var(--yms-gold-text);
}
.body:not(.white) .yms-faq-pytanie {
  color: var(--yms-ink);
}
.body:not(.white) .yms-faq-przycisk[aria-expanded="true"] .yms-faq-pytanie {
  color: var(--yms-caramel-deep);
}
@media (hover: hover) and (pointer: fine) {
  .body:not(.white) .yms-faq-przycisk:hover .yms-faq-pytanie {
    color: var(--yms-caramel-deep);
  }
  .body.white .yms-faq-przycisk:hover .yms-faq-pytanie {
    color: #DBBD9A;
  }
}
.body:not(.white) .yms-faq-ikona {
  border: 1px solid var(--yms-line-strong);
}
.body:not(.white) .yms-faq-ikona::before,
.body:not(.white) .yms-faq-ikona::after {
  background: var(--yms-ink);
}
.body:not(.white) .yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona {
  border-color: var(--yms-ink);
  background: var(--yms-ink);
}
.body:not(.white) .yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona::before,
.body:not(.white) .yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona::after {
  background: #FBF1E4;
}
.body:not(.white) .yms-faq-tresc .faq-p {
  color: var(--yms-taupe);
}
.body:not(.white) .yms-faq-kontakt {
  background: var(--yms-caramel-deep);
  color: #FBF1E4;
}
.body:not(.white) .yms-faq-kontakt:hover {
  background: var(--yms-ink);
}

/* kolory: tryb ciemny */
.body.white .yms-faq,
.body.white .yms-faq-pozycja {
  border-color: rgba(255, 255, 255, .14);
}
.body.white .yms-faq-nr {
  color: #DBBD9A;
}
.body.white .yms-faq-pytanie {
  color: #EBEBEB;
}
.body.white .yms-faq-przycisk[aria-expanded="true"] .yms-faq-pytanie {
  color: #DBBD9A;
}
.body.white .yms-faq-ikona {
  border: 1px solid rgba(255, 255, 255, .3);
}
.body.white .yms-faq-ikona::before,
.body.white .yms-faq-ikona::after {
  background: #EBEBEB;
}
.body.white .yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona {
  border-color: #DBBD9A;
  background: #DBBD9A;
}
.body.white .yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona::before,
.body.white .yms-faq-przycisk[aria-expanded="true"] .yms-faq-ikona::after {
  background: #1F1F1F;
}
.body.white .yms-faq-tresc .faq-p {
  color: rgba(235, 235, 235, .78);
}
.body.white .yms-faq-kontakt {
  background: #DBBD9A;
  color: #1F1F1F;
}
.body.white .yms-faq-kontakt:hover {
  background: #EBEBEB;
}

@media screen and (max-width: 767px) {
  .yms-faq-przycisk {
    grid-template-columns: 26px minmax(0, 1fr) 32px;
    gap: 12px;
    padding: 14px 0;
  }
  .yms-faq-nr {
    font-size: 15px;
  }
  .yms-faq-pytanie {
    font-size: 17.5px;
  }
  .yms-faq-ikona {
    width: 32px;
    height: 32px;
  }
  .yms-faq-tresc {
    padding: 0 0 0 38px;
  }
  .yms-faq-tresc .faq-p {
    font-size: 14.5px;
  }
  .yms-faq-tresc > :last-child {
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yms-faq-panel,
  .yms-faq-tresc,
  .yms-faq-pytanie,
  .yms-faq-ikona {
    transition: none;
  }
}

/* „Współpraca” zwarta (jak FAQ): niższe wiersze, mniejsza nazwa usługi i ikona, plakietka „Oferta premierowa”
   obok nazwy zamiast nad nią. Przy 1440×900 nagłówek z listą i otwartą pierwszą pozycją ma ~770px (było ~1060px). */
@media (min-width: 768px) {
  #partnership .yms-wsp { margin-top: clamp(24px, 4svh, 40px); }
  .yms-wsp-przycisk,
  .yms-wsp-przycisk:has(.yms-wsp-plakietka) {
    grid-template-columns: 64px minmax(0, 1fr) 40px;
    padding: clamp(12px, 1.8svh, 16px) 12px;
  }
  .yms-wsp-tytul { font-size: clamp(28px, 2.6vw, 38px); }
  .yms-wsp-ikona { width: 40px; height: 40px; }
  .yms-wsp-plakietka {
    position: relative;
    left: auto;
    bottom: auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
    transform: translateY(-.25em);
  }
  .yms-wsp-panel-tresc {
    padding-left: calc(64px + 24px + 12px);
    padding-right: calc(40px + 24px + 12px);
  }
  .yms-wsp-tekst,
  .yms-wsp-bok { margin-bottom: 28px; }
}
@media (min-width: 992px) {
  .yms-wsp-lead { margin-bottom: 14px; font-size: clamp(18px, 1.6vw, 23px); }
  .yms-wsp-opis { font-size: 15px; line-height: 1.75; }
  .yms-wsp-tekst,
  .yms-wsp-bok { margin-bottom: 24px; }
  .yms-wsp-fakty li { padding-top: 9px; padding-bottom: 9px; }
  .yms-wsp-fakty li::before { top: 16px; }
}
@media (max-width: 767px) {
  .yms-wsp-przycisk { padding: 16px 0; }
  .yms-wsp-przycisk:has(.yms-wsp-plakietka) { padding-top: 40px; }
}

/* ===== Typografia strony głównej (audyt 17.10.2026). Szablon opiera się na kontraście: duże ozdobne nagłówki Envegas
   przy drobnym, lekkim tekście, a „O mnie” i „Certificate IHH” nachodzą na zdjęcia – tę skalę zostawiamy.
   Porządkujemy tylko przypadkowe różnice z Webflow: nagłówki sekcji mają jeden rozmiar na danym ekranie (było 100–140px),
   tekst główny 15px z umiarkowaną interlinią (było 13–16px i interlinia do 35px), opinia klientki 16px (było 14px),
   etykiety wersalikami 11px, przyciski 14px, pola formularzy 16px (iPhone powiększał stronę przy 15px).
   Interlinie nagłówków zostają z Webflow. */
:root {
  --yms-h2: 120px;
}
@media (max-width: 1199px) {
  :root { --yms-h2: 100px; }
}
@media (max-width: 991px) {
  :root { --yms-h2: 80px; }
}
@media (max-width: 767px) {
  /* telefon: 72px (najdłuższe słowa – „Współpraca”, „Hipnoterapia” – mieszczą się w jednej linii), na 320px ok. 61px */
  :root { --yms-h2: clamp(56px, 19vw, 72px); }
  #partnership .heading-style-h2,
  .eve._120pxx,
  .blog-home-title-copy,
  #faq-section h2.eve,
  #contact h2.eve,
  .yms-insta-tytul {
    line-height: 1.15;
  }
}
.heading-150px.eva.black,
.slider-title,
#partnership .heading-style-h2,
.eve._120pxx,
.eve._120pxx .text-span-29,
.blog-home-title-copy,
#faq-section h2.eve,
#contact h2.eve,
.yms-insta-tytul {
  font-size: var(--yms-h2);
}

/* interlinie dopasowane tam, gdzie Webflow zostawił wartości liczone dla innych rozmiarów:
   „Blog” na tablecie i telefonie miał 150px / 90px wiersza przy napisie 80 / 56px (ogromna pusta przestrzeń),
   „Holistyczna / Hipnoterapia” na większym telefonie (480–767px) zachodziła wierszami jak na komputerze */
@media (min-width: 992px) and (max-width: 1199px) {
  #slider .padding-section-medium.pd-inc.padding-reduce { padding-top: 127px; }
}
@media (max-width: 991px) {
  .blog-home-title-copy { line-height: 1.15; }
}
@media (max-width: 767px) {
  /* „Hipnoterapia” to ok. 4,75 wysokości liter – na wąskich telefonach napis zmniejsza się, żeby nie wyjść za kolumnę */
  .slider-title {
    font-size: min(var(--yms-h2), calc((100vw - 40px) / 4.8));
    line-height: 1.12;
  }
  /* EN: „Hypnotherapy” jest dłuższe (ok. 5,35 wysokości liter) */
  html[lang="en"] .slider-title {
    font-size: min(var(--yms-h2), calc((100vw - 40px) / 5.4));
  }
}

/* większy telefon (480–767px): Webflow ma tu osobne odstępy, przez co rytm sekcji odbiegał od telefonu 375px */
@media (min-width: 480px) and (max-width: 767px) {
  #slider { margin-top: 16px; }
  #partnership .padding-section-medium-copy { padding-top: 29px; }
  .program-section.pd-low .left-heeading { margin-bottom: 16px; }
  .program-section.pd-low .padding-section-medium._4rem { padding-bottom: 40px; }
}

/* tekst główny: 15px, grubość z szablonu */
.blac.fix.omniee,
.blac._w-cer-copy,
.slider-desc,
.yms-wsp-opis,
.fcqs-black,
.yms-faq-tresc .faq-p,
.yms-program-opis,
.yms-insta-spotify {
  font-size: 15px;
  line-height: 1.75;
}
@media (max-width: 767px) {
  .blac.fix.omniee,
  .blac._w-cer-copy,
  .slider-desc,
  .yms-wsp-opis,
  .fcqs-black,
  .yms-faq-tresc .faq-p,
  .yms-program-opis,
  .yms-insta-spotify {
    line-height: 1.7;
  }
}

/* opinia klientki: krój z szablonu, trochę większa od tekstu głównego (wszystkie trzy zakładki – 2. i 3. mają
   w Webflow dodatkowe klasy .m-top / .m-top-2 z własnym rozmiarem) */
.testimonial-text-wrapper .size-24 {
  font-size: 16px;
  line-height: 1.75;
}
@media (max-width: 767px) {
  .testimonial-text-wrapper .size-24 { font-size: 15px; line-height: 1.7; }
}

/* karty „Rodzaje hipnoterapii”: numer „[ 1. ]” jako mała etykieta, nazwa (Montserrat z szablonu) ważniejsza */
.bimber {
  font: 600 12px/1 Montserrat, sans-serif;
  letter-spacing: .18em;
}

/* etykiety wersalikami: 11px */
.yms-wsp-plakietka { font-size: 11px; letter-spacing: .18em; }
.yms-cytat-podpis { font-size: 11px; letter-spacing: .22em; }
@media (max-width: 767px) {
  .hero-section .paragraph-2.icon-light { font-size: 11px; }
}

/* przyciski 14px, półgrube */
.yms-program-cta { font-size: 14px; }
#contact .link-blok-button .text-link,
#contact .submit-button-2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
}

/* pola formularzy 16px – przy mniejszych Safari na iPhonie powiększa stronę po dotknięciu pola */
.text-feild,
.footer-form-field {
  font-size: 16px;
}
#contact .chang-color { line-height: 1.6; }

/* ===== Menu (navbar). Układ z Webflow bez zmian: linki po bokach, logo pośrodku (na telefonie i tablecie logo
   z lewej, ikona menu z prawej). Porządki:
   – linki w ciepłym brązie strony (Webflow: szary #373737), 15px, półgrube; bieżąca sekcja i najechanie w karmelu
     – bez pogrubienia, które poszerzało link i przesuwało menu;
   – flaga języka i przełącznik trybu w jednej linii z linkami (komputer: za cienką kreską po „Kontakt”,
     telefon i tablet: obok ikony menu), zamiast wisieć nad nimi;
   – mniejszy laptop (992–1199px): ciaśniej i mniejsze logo, żeby „Współpraca” nie dotykała logo.
   Linki i podpisy w HTML porządkuje tools/menu.py. */
.nav-link.w-nav-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}
.nav-link.w-nav-link.w--current {
  font-weight: 500;
}
/* !important, bo osadzony w stronach styl Webflow ma .nav-link.icon-light { color: #373737 !important } */
.body:not(.white) .nav-link.w-nav-link {
  color: var(--yms-ink) !important;
}
.body:not(.white) .nav-link.w-nav-link.w--current,
.body:not(.white) .nav-link.w-nav-link:hover {
  color: var(--yms-caramel-deep) !important;
}
.body.white .nav-link.w-nav-link.w--current,
.body.white .nav-link.w-nav-link:hover {
  color: #DBBD9A !important;
}
.body:not(.white) .menu-button .icon.icon-light {
  color: var(--yms-ink) !important;
}
@media (min-width: 992px) {
  .right-menu-items {
    margin-right: 59px; /* kreska i flaga języka (bez przełącznika trybu ciemnego), 24px między nimi */
  }
  .right-menu-items::after {
    content: "";
    width: 1px;
    height: 18px;
    background: var(--yms-line);
  }
  .body.white .right-menu-items::after {
    background: rgba(255, 255, 255, .2);
  }
  .language-switcher {
    top: 36px;
    right: 0;
    left: auto;
    bottom: auto;
    width: 25px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-link.w-nav-link {
    font-size: 14px;
  }
  .left-menu-items,
  .right-menu-items {
    gap: 14px;
  }
  .nav_brand {
    width: 165px;
  }
  .nav_brand .nav_logo {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .navbar-compound .language-switcher {
    top: 33px;
    right: 58px; /* tuż przy przycisku menu, w miejscu dawnego przełącznika trybu ciemnego */
    left: auto;
    bottom: auto;
    width: 25px;
    margin: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-compound .language-switcher {
    right: 78px;
  }
}
@media (max-width: 359px) {
  .nav_brand {
    width: 160px;
  }
  .nav_brand .nav_logo {
    width: 100%;
  }
}

/* ===== Blog na stronie głównej (HTML buduje tools/blog/build.py). Zamiast trzech różnych kart z Webflow (karta ze
   zdjęciem w ramce, beżowa karta bez zdjęcia z przyciskiem „Umów wizytę”, trzecia karta ze zdjęciem) – jeden język
   jak na stronie bloga: zdjęcia z zaokrągleniem bez ramek, nad tytułem kategoria (karmel) i data, tytuł szeryfem.
   Z lewej polecany wpis, z prawej lista trzech kolejnych z miniaturami, oddzielona cienkimi liniami jak FAQ
   i „Współpraca”. Link do wszystkich artykułów jako obrysowany przycisk (na telefonie pod listą). */
.yms-bd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "tytul link"
    "siatka siatka";
  align-items: end;
  column-gap: 24px;
}
.blog-home-title-copy.yms-bd-tytul {
  grid-area: tytul;
  display: block;
  margin: 0 0 clamp(28px, 3.4vw, 52px);
  line-height: 1;
}
.yms-bd-wszystkie {
  grid-area: link;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 3.4vw, 52px);
  padding: 14px 24px;
  border: 1px solid;
  border-radius: 999px;
  font: 600 14px/1 Montserrat, sans-serif;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.yms-bd-wszystkie svg,
.yms-bd-czytaj svg,
.yms-bd-strzalka svg {
  width: 17px;
  height: 13px;
  transition: transform .3s ease;
}
.yms-bd-siatka {
  grid-area: siatka;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
}
.yms-bd-glowny,
.yms-bd-wpis {
  color: inherit;
  text-decoration: none;
}
.yms-bd-glowny {
  display: flex;
  flex-direction: column;
}
.yms-bd-foto,
.yms-bd-mini {
  display: block;
  overflow: hidden;
}
.yms-bd-foto {
  aspect-ratio: 16 / 10;
  margin-bottom: 22px;
  border-radius: 10px;
}
.yms-bd-mini {
  aspect-ratio: 1;
  border-radius: 8px;
}
.yms-bd-foto img,
.yms-bd-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.yms-bd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-bottom: 12px;
  font: 600 11px/1.3 Montserrat, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.yms-bd-data {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
}
.yms-bd-data::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 12px 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.yms-bd-nazwa {
  margin: 0;
  font: 400 clamp(26px, 2.3vw, 34px)/1.2 var(--yms-serif-display);
  letter-spacing: -.005em;
  text-wrap: balance;
  transition: color .3s ease;
}
.yms-bd-opis {
  max-width: 34em;
  margin: 14px 0 0;
  font: 400 15px/1.7 Montserrat, sans-serif;
  text-wrap: pretty;
}
.yms-bd-czytaj {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font: 600 13px/1 Montserrat, sans-serif;
  letter-spacing: .04em;
}
.yms-bd-lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid;
}
.yms-bd-lista li {
  display: flex;
  flex: 1;
  border-bottom: 1px solid;
}
.yms-bd-wpis {
  display: grid;
  grid-template-columns: clamp(96px, 9.5vw, 136px) minmax(0, 1fr) 20px;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  width: 100%;
  padding: 20px 0;
}
.yms-bd-wpis .yms-bd-meta {
  margin-bottom: 8px;
}
.yms-bd-wpis .yms-bd-nazwa {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .yms-bd-glowny:hover .yms-bd-foto img,
  .yms-bd-wpis:hover .yms-bd-mini img {
    transform: scale(1.04);
  }
  .yms-bd-wszystkie:hover svg,
  .yms-bd-glowny:hover .yms-bd-czytaj svg,
  .yms-bd-wpis:hover .yms-bd-strzalka svg {
    transform: translateX(4px);
  }
}

/* kolory: tryb jasny (papier) */
.body:not(.white) .yms-bd-kat { color: var(--yms-gold-text); }
.body:not(.white) .yms-bd-data { color: var(--yms-taupe); }
.body:not(.white) .yms-bd-nazwa { color: var(--yms-ink); }
.body:not(.white) .yms-bd-opis { color: var(--yms-taupe); }
.body:not(.white) .yms-bd-czytaj,
.body:not(.white) .yms-bd-strzalka { color: var(--yms-caramel-deep); }
.body:not(.white) .yms-bd-lista,
.body:not(.white) .yms-bd-lista li { border-color: var(--yms-line); }
.body:not(.white) .yms-bd-wszystkie {
  border-color: var(--yms-line-strong);
  color: var(--yms-ink);
}
@media (hover: hover) and (pointer: fine) {
  .body:not(.white) .yms-bd-glowny:hover .yms-bd-nazwa,
  .body:not(.white) .yms-bd-wpis:hover .yms-bd-nazwa { color: var(--yms-caramel-deep); }
  .body:not(.white) .yms-bd-wszystkie:hover {
    border-color: var(--yms-caramel-deep);
    background: var(--yms-caramel-deep);
    color: #FBF1E4;
  }
}

/* kolory: tryb ciemny */
.body.white .yms-bd-kat,
.body.white .yms-bd-czytaj,
.body.white .yms-bd-strzalka { color: #DBBD9A; }
.body.white .yms-bd-data { color: rgba(235, 235, 235, .62); }
.body.white .yms-bd-nazwa { color: #EBEBEB; }
.body.white .yms-bd-opis { color: rgba(235, 235, 235, .78); }
.body.white .yms-bd-lista,
.body.white .yms-bd-lista li { border-color: rgba(255, 255, 255, .14); }
.body.white .yms-bd-wszystkie {
  border-color: rgba(255, 255, 255, .3);
  color: #EBEBEB;
}
@media (hover: hover) and (pointer: fine) {
  .body.white .yms-bd-glowny:hover .yms-bd-nazwa,
  .body.white .yms-bd-wpis:hover .yms-bd-nazwa { color: #DBBD9A; }
  .body.white .yms-bd-wszystkie:hover {
    border-color: #DBBD9A;
    background: #DBBD9A;
    color: #1F1F1F;
  }
}

@media (max-width: 991px) {
  .yms-bd-siatka {
    grid-template-columns: minmax(0, 1fr);
  }
  .yms-bd-foto {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 767px) {
  .yms-bd {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "tytul"
      "siatka"
      "link";
  }
  .yms-bd-wszystkie {
    justify-content: center;
    margin: 28px 0 0;
  }
  .yms-bd-foto {
    aspect-ratio: 3 / 2;
    margin-bottom: 18px;
  }
  .yms-bd-nazwa {
    font-size: 24px;
  }
  .yms-bd-opis {
    font-size: 14.5px;
  }
  .yms-bd-siatka {
    gap: 36px;
  }
  .yms-bd-wpis {
    grid-template-columns: 84px minmax(0, 1fr) 18px;
    gap: 14px;
    padding: 16px 0;
  }
  .yms-bd-wpis .yms-bd-nazwa {
    font-size: 17px;
  }
  /* w wąskiej kolumnie obok miniatury data spadała do drugiej linii z kropką na początku – zostaje sama kategoria */
  .yms-bd-wpis .yms-bd-data {
    display: none;
  }
}

/* ===== Menu mobilne (nakładka .menu-wrapper; HTML buduje tools/menu.py, otwieranie i zamykanie z Webflow).
   Zamiast „MENU”, krzyżyka z obrazka i wyśrodkowanych wersalików Envegas (bez „ł”, „ą”, „ę”) z pustą połową ekranu:
   logo i okrągły przycisk zamknięcia w miejscu ikony menu, lista jak FAQ (numer, nazwa szeryfem, cienkie linie,
   strzałka), karta programu jak panel na stronie głównej, przycisk „Umów wizytę”, e-mail, Instagram i PL / EN.
   Pozycje wjeżdżają po kolei po otwarciu (Webflow wstawia w style display: flex). Tryb ciemny – ciemne tło. */
.menu-wrapper {
  overflow: hidden;
}
.yms-mm {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom));
}
.yms-mm-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.yms-mm-logo img {
  display: block;
  width: 168px;
  height: auto;
}
.yms-mm-zamknij {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.yms-mm-zamknij::before,
.yms-mm-zamknij::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.yms-mm-zamknij::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.yms-mm-lista {
  margin-top: 30px;
  border-top: 1px solid;
}
.yms-mm-poz {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  border-bottom: 1px solid;
  color: inherit;
  text-decoration: none;
}
.yms-mm-nr {
  font: 300 17px/1 "Classy Coiffeur", Georgia, serif;
  letter-spacing: .04em;
}
.yms-mm-nazwa {
  font: 400 27px/1.15 var(--yms-serif-display);
  letter-spacing: -.005em;
}
.yms-mm-poz svg,
.yms-mm-program-l svg,
.yms-mm-cta svg {
  width: 16px;
  height: 12px;
}
.yms-mm-program {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding: 18px 20px 20px;
  border-radius: 14px;
  text-decoration: none;
}
.yms-mm-program-k {
  font: 600 10px/1.3 Montserrat, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.yms-mm-program-t {
  font: 400 30px/1.05 "Envegas 0 Wyyp", Georgia, serif;
}
.yms-mm-program-l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font: 600 13px/1 Montserrat, sans-serif;
  letter-spacing: .04em;
}
.yms-mm-dol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: auto;
  padding-top: 26px;
}
.yms-mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 24px;
  border-radius: 999px;
  font: 600 15px/1 Montserrat, sans-serif;
  letter-spacing: .03em;
  text-decoration: none;
}
.yms-mm-stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 13px/1.3 Montserrat, sans-serif;
}
.yms-mm-kontakt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.yms-mm-kontakt a {
  color: inherit;
  text-decoration: none;
}
.yms-mm-ig svg {
  display: block;
  width: 20px;
  height: 20px;
}
.yms-mm-jezyki {
  display: flex;
  flex: none;
  gap: 4px;
  font: 600 12px/1 Montserrat, sans-serif;
  letter-spacing: .12em;
}
.yms-mm-jezyki a {
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  opacity: .55;
}
.yms-mm-jezyki a[aria-current="page"] {
  border-color: currentColor;
  opacity: 1;
}
/* 320 px: e-mail i PL / EN mieszczą się w marginesach */
@media (max-width: 359px) {
  .yms-mm-stopka {
    gap: 8px;
    font-size: 12px;
  }
  .yms-mm-kontakt {
    gap: 10px;
  }
  .yms-mm-jezyki a {
    padding-left: 7px;
    padding-right: 7px;
  }
}
@keyframes yms-mm-wejscie {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.menu-wrapper[style*="flex"] :is(.yms-mm-poz, .yms-mm-program, .yms-mm-dol) {
  animation: yms-mm-wejscie .55s cubic-bezier(.2, .8, .2, 1) both;
}
.menu-wrapper[style*="flex"] .yms-mm-poz:nth-child(1) { animation-delay: .18s; }
.menu-wrapper[style*="flex"] .yms-mm-poz:nth-child(2) { animation-delay: .23s; }
.menu-wrapper[style*="flex"] .yms-mm-poz:nth-child(3) { animation-delay: .28s; }
.menu-wrapper[style*="flex"] .yms-mm-poz:nth-child(4) { animation-delay: .33s; }
.menu-wrapper[style*="flex"] .yms-mm-poz:nth-child(5) { animation-delay: .38s; }
.menu-wrapper[style*="flex"] .yms-mm-poz:nth-child(6) { animation-delay: .43s; }
.menu-wrapper[style*="flex"] .yms-mm-program { animation-delay: .5s; }
.menu-wrapper[style*="flex"] .yms-mm-dol { animation-delay: .56s; }
@media (prefers-reduced-motion: reduce) {
  .menu-wrapper[style*="flex"] :is(.yms-mm-poz, .yms-mm-program, .yms-mm-dol) {
    animation: none;
  }
}
@media (min-width: 768px) {
  .yms-mm {
    padding-left: 40px;
    padding-right: 40px;
  }
}
/* strona pod otwartym menu się nie przewija (klasę ustawia /js/yms.js) */
html.yms-menu-otwarte,
html.yms-menu-otwarte body {
  overflow: hidden;
}

/* kolory: tryb jasny (papier) */
.body:not(.white) .menu-wrapper {
  background-color: var(--yms-beige);
  color: var(--yms-ink);
}
.body:not(.white) .yms-mm-zamknij {
  border-color: var(--yms-line-strong);
  color: var(--yms-ink);
}
.body:not(.white) :is(.yms-mm-lista, .yms-mm-poz) {
  border-color: var(--yms-line);
}
.body:not(.white) .yms-mm-nr,
.body:not(.white) .yms-mm-poz svg {
  color: var(--yms-gold-text);
}
.body:not(.white) .yms-mm-program {
  background: var(--yms-ink);
  color: #FBF1E4;
}
.body:not(.white) .yms-mm-program-k {
  color: #DBBD9A;
}
.body:not(.white) .yms-mm-cta {
  background: var(--yms-caramel-deep);
  color: #FBF1E4;
}
.body:not(.white) .yms-mm-stopka {
  color: var(--yms-taupe);
}

/* kolory: tryb ciemny */
.body.white .menu-wrapper {
  background-color: #1F1F1F;
  color: #EBEBEB;
}
.body.white .yms-mm-zamknij {
  border-color: rgba(255, 255, 255, .3);
  color: #EBEBEB;
}
.body.white :is(.yms-mm-lista, .yms-mm-poz) {
  border-color: rgba(255, 255, 255, .14);
}
.body.white .yms-mm-nr,
.body.white .yms-mm-poz svg {
  color: #DBBD9A;
}
.body.white .yms-mm-program {
  border: 1px solid rgba(219, 189, 154, .35);
  background: rgba(219, 189, 154, .08);
  color: #EBEBEB;
}
.body.white .yms-mm-program-k,
.body.white .yms-mm-program-l {
  color: #DBBD9A;
}
.body.white .yms-mm-cta {
  background: #DBBD9A;
  color: #1F1F1F;
}
.body.white .yms-mm-stopka {
  color: rgba(235, 235, 235, .72);
}

/* ===== Intro „Oddech” (pierwsze wejście w czasie wizyty; HTML: tools/intro.py, sterowanie: /js/yms.js).
   Znak YMS (maska z sygnet.png) wypełnia się złotem od dołu – to postęp ładowania: do 85% w 1,4 s, reszta po
   załadowaniu strony (.yms-intro-gotowe). Od znaku rozchodzą się owalne fale, pod spodem słowo po słowie wyostrza się
   „Weź głęboki oddech” (jak cytat na stronie). Wyjście (.yms-intro-wyjscie): strona odsłania się od środka miękkim
   kręgiem (maska z animowaną zmienną --yms-krag); bez @property albo przy ograniczonym ruchu – zwykłe przenikanie. */
@property --yms-krag {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.loading-wrapper.yms-intro {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.yms-intro-znak {
  position: relative;
  width: clamp(116px, 11vw, 156px);
  aspect-ratio: 212 / 240;
  animation: yms-intro-oddech 3.2s ease-in-out infinite;
}
.yms-intro-cien,
.yms-intro-zloto {
  position: absolute;
  inset: 0;
  -webkit-mask: url("/assets/zakorzeniona/sygnet.png") center / contain no-repeat;
  mask: url("/assets/zakorzeniona/sygnet.png") center / contain no-repeat;
}
.yms-intro-cien {
  opacity: .2;
}
.yms-intro-zloto {
  clip-path: inset(100% 0 0 0);
  animation: yms-intro-postep 1.4s cubic-bezier(.35, .05, .25, 1) .1s forwards;
}
.yms-intro-gotowe .yms-intro-zloto {
  animation: yms-intro-domknij .35s ease-out forwards;
}
.yms-intro-fala {
  position: absolute;
  inset: 0;
  border: 1px solid;
  border-radius: 50%;
  opacity: 0;
  animation: yms-intro-fala 3.2s cubic-bezier(.2, .6, .3, 1) .5s infinite;
}
.yms-intro-fala + .yms-intro-fala {
  animation-delay: 2.1s;
}
.yms-intro-oddech {
  margin: 0;
  font: italic 300 clamp(21px, 1.8vw, 26px)/1.3 var(--yms-serif-display);
  letter-spacing: .01em;
}
.yms-intro-oddech span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  animation: yms-intro-slowo .9s ease-out forwards;
}
.yms-intro-oddech span:nth-child(1) { animation-delay: .25s; }
.yms-intro-oddech span:nth-child(2) { animation-delay: .5s; }
.yms-intro-oddech span:nth-child(3) { animation-delay: .75s; }
.yms-intro-oddech span:nth-child(4) { animation-delay: 1s; }
@keyframes yms-intro-postep {
  to { clip-path: inset(15% 0 0 0); }
}
@keyframes yms-intro-domknij {
  from { clip-path: inset(15% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes yms-intro-oddech {
  0%, 100% { transform: scale(.985); }
  50% { transform: scale(1.025); }
}
@keyframes yms-intro-fala {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes yms-intro-slowo {
  to { opacity: 1; filter: blur(0); }
}
/* wyjście: krąg z miękką krawędzią rośnie od środka i odsłania stronę */
.yms-intro.yms-intro-wyjscie {
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--yms-krag), #000 calc(var(--yms-krag) + 120px));
  mask: radial-gradient(circle at 50% 46%, transparent var(--yms-krag), #000 calc(var(--yms-krag) + 120px));
  animation: yms-intro-krag 1s cubic-bezier(.65, 0, .25, 1) forwards;
}
.yms-intro-wyjscie .yms-intro-znak,
.yms-intro-wyjscie .yms-intro-oddech {
  opacity: 0;
  transform: scale(1.18);
  transition: opacity .55s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}
.yms-intro-wyjscie .yms-intro-znak {
  animation: none;
}
@keyframes yms-intro-krag {
  to { --yms-krag: 150vmax; }
}
.yms-intro.yms-intro-zanik {
  opacity: 0;
  transition: opacity .45s ease;
}
/* w czasie intro strona pod spodem się nie przewija */
html.yms-intro-trwa,
html.yms-intro-trwa body {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .yms-intro-znak,
  .yms-intro-fala {
    animation: none;
  }
  .yms-intro-zloto {
    clip-path: none;
    animation: none;
  }
  .yms-intro-oddech span {
    opacity: 1;
    filter: none;
    animation: none;
  }
}

/* kolory: tryb jasny (papier) i ciemny */
.body:not(.white) .yms-intro-cien { background: var(--yms-ink); }
.body:not(.white) .yms-intro-zloto { background: linear-gradient(180deg, #B98552 0%, #8A5A2E 55%, #6F4521 100%); }
.body:not(.white) .yms-intro-fala { border-color: rgba(146, 97, 52, .55); }
.body:not(.white) .yms-intro-oddech { color: var(--yms-taupe); }
.body.white .loading-wrapper.yms-intro { background: #1F1F1F; }
.body.white .yms-intro-cien { background: #EBEBEB; }
.body.white .yms-intro-zloto { background: linear-gradient(180deg, #F1DCC0 0%, #DBBD9A 60%, #C9A27A 100%); }
.body.white .yms-intro-fala { border-color: rgba(219, 189, 154, .5); }
.body.white .yms-intro-oddech { color: rgba(235, 235, 235, .78); }

/* Tło trybu ciemnego: ta sama tekstura bezstratnie w WebP (PNG 555 KB → 252 KB); warstwy jak w CSS Webflow */
.body.white {
  background-image: linear-gradient(#dbbd9a0d, #dbbd9a0d), url("/assets/yms-opt/dark-mode-bg.webp"),
    url("/assets/673ca8a98780432439429ee2_dark-bg-lines.svg");
}

/* Kontrast drobnych karmelowych napisów na beżu (WCAG AA 4,5:1): numery i „W skrócie” we Współpracy, podpis cytatu */
.body:not(.white) .yms-wsp-nr,
.body:not(.white) .yms-wsp-skrot,
.body:not(.white) .yms-cytat-podpis {
  color: #84562D;
}

/* Lista języków pod flagą – jasna jak cała strona. Webflow dawał pozycjom ciemne tło (pod tryb ciemny), więc w trybie
   jasnym aktywny język był czarny na czarnym. Lista wyrównana do prawej krawędzi flagi, żeby nie wychodziła poza menu. */
.language-switcher .w-dropdown-list {
  left: auto;
  right: 0;
  min-width: 128px;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--yms-card-line);
  border-radius: 12px;
  background: #FBF6EF;
  box-shadow: 0 18px 40px -18px rgba(46, 32, 22, .45);
}
.language-switcher .locale {
  background: none;
}
.body .language-switcher .link-2 {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  background: none;
  color: var(--yms-ink);
  font: 500 14px/1.2 Montserrat, sans-serif;
  text-decoration: none;
}
.body .language-switcher .link-2:hover {
  background: rgba(110, 91, 71, .1);
}
.body .language-switcher .link-2.w--current {
  background: rgba(110, 91, 71, .14);
  color: var(--yms-caramel-deep);
  font-weight: 600;
}

/* Strona EN wygląda tak samo jak PL: znosi poprawki z arkusza Webflow, które działały tylko dla angielskiego (:lang(en)) */
.slider-desc:lang(en) {
  margin-left: 0;
}
/* „Hypnotherapy” jest dłuższe od „Hipnoterapia”: nagłówek bierze całą szerokość słowa, żeby nie wchodził na opis obok */
@media (min-width: 992px) {
  html[lang="en"] .slider-title {
    flex: none;
    width: min-content;
    max-width: none;
  }
}
.nav-link-wrapper._2:lang(en) {
  min-width: 170px;
}
@media screen and (min-width: 1280px) {
  .dropdown-toggle-5:lang(en) {
    width: 26px;
  }
}