/* ==========================================================================
   Strona główna (P1) - elegancki minimalizm (SPEC §19, kontrakt .impeccable/surfaces/index-php.md).
   Tokeny i komponenty z main.css; tu tylko kompozycja sekcji. Biel porcelany, hairline, zdjęcia w zwykłych
   prostokątach r16, Bodoni tylko w h1/h2. Ruch: jedno wejście na sekcję (data-reveal z main.js).
   ========================================================================== */

/* ---------- Wspólne elementy strony ---------- */
/* Sekcje rozdziela przestrzeń; od czasu do czasu hairline na szerokość kontenera. */
.home-rule { padding-top: 0; }
.home-rule::before {
  content: ""; display: block; height: 1px; background: var(--line);
  width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin: 0 auto var(--sec-y);
}
.home-sub { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); margin-bottom: 1rem; }
.home-more { margin-top: 1.5rem; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.home-tel {
  font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .3em; text-decoration-color: var(--line-strong);
  transition: color var(--t-ui) var(--ease-out), text-decoration-color var(--t-ui) var(--ease-out);
}
.home-tel .num { font-weight: 600; }
/* Lista z hairline między pozycjami (bezpłatna konsultacja, „W ramach współpracy otrzymujesz"). */
.home-list { list-style: none; border-top: 1px solid var(--line); }
.home-list > li { padding: .875rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.home-list > li::first-letter { text-transform: uppercase; }

/* Dwie kolumny: nagłówek | treść (Dlaczego warto, Jak się zapisać). */
.home-split { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .home-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

/* ---------- 1. Pierwszy ekran (rewizja 2026-10-08, SPEC §20) ----------
   Portret p3 od krawędzi do krawędzi po prawej, wtopiony w porcelanę maską gradientową (jedyny dozwolony gradient:
   alfa maski, nie nakładka koloru). Na wygaszonej części zdjęcia leży szybka rezerwacja: biała karta hairline r16.
   Telefon (< 640 px): nagłówek, wstęp, formularz, link do cennika, potem portret gasnący u góry i u dołu.
   Tablet: portret na całą szerokość pod przezroczystym nagłówkiem (góra i lewy róg łagodnie wygaszone), gaśnie ku
   dołowi, nagłówek wchodzi na wygaszony pas, karta pod tekstem na całą szerokość kontenera.
   Od 1200 px: tekst i karta w lewej kolumnie (min(44rem, 58%)), portret od środka ekranu do prawej krawędzi;
   wysokość pierwszego ekranu ograniczona (--hero-h), a na bardzo szerokich ekranach portret ma najwyżej
   1,5 wysokości pierwszego ekranu szerokości (bez rozciągania i pikselozy, srcset do 2560 px). */
.hero {
  --hero-fade-x: linear-gradient(to right, transparent 0, transparent 8%, rgba(0, 0, 0, .1) 18%, rgba(0, 0, 0, .36) 27%, rgba(0, 0, 0, .7) 36%, rgba(0, 0, 0, .92) 42%, #000 48%);
  --hero-fade-y: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .18) 7%, rgba(0, 0, 0, .55) 15%, rgba(0, 0, 0, .88) 23%, #000 30%);
  position: relative; isolation: isolate; overflow-x: clip;
  padding-top: clamp(1.5rem, .75rem + 3vw, 3.5rem); padding-bottom: var(--sec-y);
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.hero__text { display: grid; gap: 1.25rem; justify-items: start; min-width: 0; }
.hero__title { font-size: var(--fs-h1); line-height: 1.08; max-width: 12em; text-wrap: balance; }
.hero__title em { display: block; text-wrap: balance; }
.hero__lede { max-width: 33rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .5rem; }
.hero__links { font-size: .9375rem; }

.hero__media { position: relative; z-index: 0; pointer-events: none; }
.hero__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; }

/* Telefon i tablet w pionie: portret na całą szerokość od górnej krawędzi ekranu (nagłówek jest nad nim przezroczysty),
   gaśnie ku dołowi; nagłówek wchodzi na wygaszony pas, pod nim wstęp i karta rezerwacji (w pierwszych dwóch ekranach). */
@media (max-width: 1023px) {
  .hero { padding-top: 0; }
  /* Dół gaśnie pod nagłówek strony; góra i lewy róg (ciemniejszy kąt studia pod logo i przezroczystym
     nagłówkiem) gasną łagodnie - dwie maski, część wspólna. */
  .hero__media {
    margin-top: calc(-1 * var(--header-h));
    height: min(calc(60svh + var(--header-h)), 132vw, 36rem);
    --hero-fade-v: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .55) 9%, rgba(0, 0, 0, .88) 17%, #000 23%, #000 44%, rgba(0, 0, 0, .7) 58%, rgba(0, 0, 0, .32) 71%, rgba(0, 0, 0, .08) 83%, transparent 92%);
    --hero-fade-l: linear-gradient(to right, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .8) 14%, #000 30%);
    -webkit-mask-image: var(--hero-fade-v), var(--hero-fade-l);
    -webkit-mask-composite: source-in;
    mask-image: var(--hero-fade-v), var(--hero-fade-l);
    mask-composite: intersect;
  }
  /* Nagłówek na wygaszonym pasie zdjęcia (alfa maski tam < 0,1: tekst stoi na porcelanie, nie na zdjęciu). */
  .hero__text { margin-top: -3rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__media { height: min(calc(48svh + var(--header-h)), 36rem); }
  .hero__img { object-position: 50% 24%; }
  .hero__text { margin-top: -3.5rem; }
  .hero--book .hero__title { max-width: 15em; }
  .hero--book .hero__lede { max-width: 38rem; }
  .hero--book .hero__grid { row-gap: 2.5rem; }
}
/* Telefon z szybką rezerwacją (§20, kolejność podstawowa): nagłówek, wstęp, formularz, a portret pod formularzem,
   jego góra i dół gasną w porcelanę. Tak przycisk „Zarezerwuj wizytę" mieści się w pierwszych dwóch ekranach
   także przy 375x667. Link do cennika stoi pod kartą (osobny element w kodzie, ta sama kolejność dla klawiatury). */
@media (max-width: 639px) {
  .hero--book { display: flex; flex-direction: column; padding-top: 1rem; padding-bottom: 0; }
  .hero--book .hero__text { margin-top: 0; gap: .875rem; }
  .hero--book .hero__grid { row-gap: 1.5rem; }
  .hero--book .hero__text .hero__links { display: none; }
  .hero--book .hero__media {
    order: 1; margin-top: .5rem; height: min(118vw, 30rem);
    --hero-fade-sm: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .08) 7%, rgba(0, 0, 0, .3) 15%, rgba(0, 0, 0, .66) 23%, rgba(0, 0, 0, .92) 30%, #000 35%, #000 60%, rgba(0, 0, 0, .7) 72%, rgba(0, 0, 0, .32) 84%, rgba(0, 0, 0, .08) 93%, transparent 100%);
    -webkit-mask-image: var(--hero-fade-sm); mask-image: var(--hero-fade-sm);
  }
  .hero--book .hero__img { object-position: 50% 24%; }
}
.hero__links--after { display: none; }
/* Telefon: portret z hero kończy pierwszy ekran, więc zdjęcia sekcji 2 i 3 stoją pod swoim tekstem - zdjęcia
   przeplatają się z tekstem (portret, tekst, owoce, tekst, portret), zamiast stać dwa pod rząd. */
@media (max-width: 639px) {
  .home-free, .home-about__lead { display: flex; flex-direction: column; }
  .home-free > .bleed, .home-about__lead > .bleed { order: 1; margin-top: 1.25rem; }
  .home-free > .bleed + .container, .home-about__lead > .bleed + .container { margin-top: 0; }
  .home-free { padding-bottom: calc(var(--sec-y) * .5); }
}
@media (max-width: 639px) { .hero--book .hero__links--after { display: block; margin-top: -.25rem; } }

/* Od 1024 px: portret od środka ekranu do prawej krawędzi, od górnej krawędzi ekranu, wysokości pierwszego ekranu
   (nie całej sekcji - karta może zejść niżej, pod wygaszony dół zdjęcia); na bardzo szerokich ekranach najwyżej
   1,5 wysokości pierwszego ekranu szerokości. Lewa i dolna krawędź gasną (dwie maski, część wspólna). */
@media (min-width: 1024px) {
  .hero {
    --hero-h: clamp(40rem, calc(100svh - var(--header-h)), 61.25rem);
    min-height: var(--hero-h);
    padding-block: clamp(1.75rem, 4.5svh, 3.5rem) clamp(2.5rem, 6svh, 4.5rem);
    display: grid; align-items: center;
  }
  .hero__media {
    position: absolute; top: calc(-1 * var(--header-h)); right: 0;
    left: max(50%, calc(100% - var(--hero-h) * 1.5));
    height: calc(var(--header-h) + var(--hero-h));
    -webkit-mask-image: var(--hero-fade-x), var(--hero-fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--hero-fade-x), var(--hero-fade-y);
    mask-composite: intersect;
  }
  .hero__img { object-position: 50% 26%; }
  .hero--book .hero__grid { row-gap: 1.75rem; }
  .hero--book .hero__text { gap: 1rem; }
  /* Pierwszy wiersz nagłówka sięga nad wygaszone, jednolite tło studia (nad głową, nie na twarzy) - dwa wiersze zamiast trzech. */
  .hero--book .hero__title { font-size: clamp(2.75rem, 1.5rem + 2.6vw, 4.25rem); max-width: 15em; }
  .hero--book .hero__lede { max-width: 38rem; }
  /* Karta w lewej części, na wygaszonej krawędzi portretu; twarz zostaje po prawej, obok karty. */
  .hero--book .hero__book { width: min(44rem, 62%); }
  /* Przycisk „Zarezerwuj wizytę" na pierwszym ekranie typowego laptopa (1440×900): górny oddech i odstęp wstępu
     od karty rosną z wysokością ekranu (svh), więc wyższe ekrany zostają tak samo przestronne. */
  .hero--book { padding-top: clamp(1.25rem, 3svh, 3.5rem); }
  .hero--book .hero__grid { row-gap: clamp(1.5rem, 2.6svh, 2.25rem); }
}
/* Bardzo szerokie i wysokie ekrany (2560×1440, 3440×1440, 3840×2160): wyższy pierwszy ekran - portret skaluje się
   wysokością, a kompozycja nie rozjeżdża się na boki. */
@media (min-width: 2400px) and (min-height: 1300px) {
  .hero { --hero-h: clamp(40rem, calc(100svh - var(--header-h)), 75rem); }
}

/* ---------- Szybka rezerwacja (karta na pierwszym ekranie) ---------- */
.hero__book { min-width: 0; container: qb / inline-size; scroll-margin-top: calc(var(--header-h) + 1rem); }
.qb, .qb-done {
  --qb-pad: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--qb-pad);
}
.qb__title, .qb-done__title { font-family: var(--font-text); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.qb__title { margin-bottom: 1rem; }
.qb__alert {
  display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1.25rem; padding: .75rem 1rem;
  border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-small); font-weight: 500; line-height: 1.45;
}
.qb__alert .icon { width: 1.1rem; height: 1.1rem; margin-top: .1em; }
/* Fokus na błędnym polu nie chowa go (ani komunikatu nad nim) pod przyklejonym nagłówkiem. */
.qb__alert, .qb-group, .qb .field__input, .qb-type__input, .qb-seg__input, .qb-slot__input, .qb-consent input { scroll-margin-top: calc(var(--header-h) + 1rem); }
.qb__alert:focus { outline: none; }
.qb__alert:focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 2px; }
.qb__cols { display: grid; gap: 1.5rem; }
.qb__col { display: grid; gap: 1.125rem; align-content: start; min-width: 0; }
@container qb (min-width: 36rem) {
  .qb__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4cqi, 2.25rem); }
}
.qb-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.qb-group__legend { padding: 0; margin-bottom: .5rem; font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--muted); }
.qb-group .field__error { margin-top: .5rem; }

/* Rodzaj wizyty: jedna grupa wierszy (nazwa, pod nią czas i cena), znacznik wyboru w obrysie kontrolki 3:1. */
.qb-types { display: grid; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--white); }
.qb-type {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: center;
  padding: .5rem 1rem; min-height: 3rem; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}
.qb-type + .qb-type { border-top: 1px solid var(--line); }
.qb-type__input, .qb-seg__input, .qb-slot__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.qb-type__mark {
  grid-row: 1 / span 2; position: relative; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  border: 1.5px solid var(--line-control); background: var(--white);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.qb-type__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: .4375rem; height: .4375rem; border-radius: 50%;
  background: var(--white); transform: scale(0); transition: transform var(--t-fast) var(--ease-out);
}
.qb-type__name { font-size: .96875rem; font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.qb-type__meta { grid-column: 2; font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }
.qb-type__input:checked ~ .qb-type__mark { background: var(--brand); border-color: var(--brand); }
.qb-type__input:checked ~ .qb-type__mark::after { transform: scale(1); }
.qb-type:has(.qb-type__input:checked) { background: var(--glaze); }
.qb-type:has(.qb-type__input:focus-visible) { outline: 2px solid var(--gilt-ink); outline-offset: -3px; border-radius: var(--r); }
.qb-group.is-invalid .qb-types, .qb-group.is-invalid .qb-seg { border-color: var(--danger); }

/* Forma wizyty: przełącznik segmentowy (pigułka); formy niedostępne dla rodzaju znikają (bez JS widać wszystkie). */
.qb-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; padding: .25rem;
  border: 1px solid var(--line-control); border-radius: var(--r-pill); background: var(--white);
}
.qb-seg__opt {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 .75rem;
  border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: center;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.qb-seg__opt:has(.qb-seg__input:checked) { background: var(--brand); color: var(--porcelain); }
.qb-seg__opt:has(.qb-seg__input:focus-visible) { outline: 2px solid var(--gilt-ink); outline-offset: 2px; }
.pj-js .qb-seg__opt.is-off { display: none; }

/* Najbliższe terminy: siatka winietek-radio (dzień nad godziną), wybrana = pełna zieleń. */
.qb-slots__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; transition: opacity var(--t-fast) var(--ease-out); }
.qb-slots__grid[aria-busy="true"] { opacity: .45; }
.qb-slot {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .125rem; min-height: 3.5rem;
  padding: .5rem .375rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white);
  text-align: center; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.qb-slot__day { font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); white-space: nowrap; }
.qb-slot__time { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.qb-slot:has(.qb-slot__input:checked) { background: var(--brand); border-color: var(--brand); }
.qb-slot:has(.qb-slot__input:checked) :is(.qb-slot__day, .qb-slot__time) { color: var(--porcelain); }
.qb-slot:has(.qb-slot__input:focus-visible) { outline: 2px solid var(--gilt-ink); outline-offset: 2px; }
.qb-slot--ghost { cursor: default; border-color: var(--line); background: var(--glaze); min-height: 3.5rem; }
@container qb (max-width: 19rem) { .qb-slots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.qb-slots__taken {
  margin-bottom: .75rem; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--warning-soft);
  font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2);
}
.qb-slots__taken:focus { outline: none; }
.qb-slots__taken:focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 2px; }
.qb-slots__taken-title { font-weight: 600; color: var(--ink); }
.qb-slots__empty { padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.qb-slots__empty-title { font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.qb-slots__tel { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.qb-slots__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: .875rem; }
.qb-slots__more { font-size: .9375rem; }
.qb-refresh__hint { margin-top: .5rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); max-width: 40ch; }
.pj-js .qb-refresh, .pj-js .qb-refresh__hint { display: none; }

/* Dane: imię | nazwisko, e-mail, telefon; w szerszej karcie jednokolumnowej e-mail | telefon. */
.qb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
.qb-fields > .field--email, .qb-fields > .field--tel { grid-column: 1 / -1; }
@container qb (min-width: 30rem) and (max-width: 35.99rem) {
  .qb-fields > .field--email, .qb-fields > .field--tel { grid-column: auto; }
}
@container qb (max-width: 17rem) { .qb-fields { grid-template-columns: minmax(0, 1fr); } }
.qb-fields .field__label { font-size: .875rem; }
.qb-consent .check__label, .qb-consent .consent-more { font-size: var(--fs-xs); line-height: 1.5; }
.qb-submit { display: grid; gap: .625rem; }
.qb-submit__note { font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* Karta dwukolumnowa (od 36rem szerokości): ciaśniejszy rytm pionowy - wiersze rodzajów i kafelki terminów niższe
   (nadal >= 44 px), pola 46 px, mniejsze odstępy między grupami; tekst bez zmian rozmiaru. */
@container qb (min-width: 36rem) {
  .qb { padding-block: clamp(1.25rem, 1rem + .5vw, 1.5rem); }
  .qb__title { margin-bottom: .75rem; }
  .qb__col { gap: .875rem; }
  .qb-group__legend { margin-bottom: .375rem; }
  .qb-type { padding-block: .375rem; }
  .qb-slot { min-height: 3.25rem; padding-block: .375rem; }
  .qb-slots__foot { margin-top: .75rem; }
  .qb-fields { row-gap: .75rem; }
  .qb-fields .field { gap: .375rem; }
  .qb-fields .field__input { min-height: 2.875rem; padding-block: .625rem; }
}
/* Wąska karta (telefon): terminy w jednym przewijanym rzędzie (widać kawałek następnego kafelka), ciaśniejszy
   rytm między grupami - przycisk mieści się w pierwszych dwóch ekranach. */
@container qb (max-width: 28rem) {
  .qb__title { margin-bottom: .625rem; }
  .qb__cols { gap: 1rem; }
  .qb__col { gap: .875rem; }
  .qb-group__legend { margin-bottom: .375rem; }
  .qb-type { padding-block: .375rem; }
  .qb-type__name { font-size: .9375rem; }
  .qb-type__meta { font-size: var(--fs-xs); }
  /* Rząd terminów sięga do krawędzi karty: kafelki chowają się pod krawędzią, nie w połowie odstępu. */
  .qb-slots__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 1rem) / 3.35);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: -3px calc(-1 * var(--qb-pad)); padding: 3px var(--qb-pad); scroll-padding-inline: var(--qb-pad);
  }
  .qb-slots__grid::-webkit-scrollbar { display: none; }
  .qb-slot { scroll-snap-align: start; min-height: 3.25rem; padding-block: .375rem; }
  .qb-slots__foot { margin-top: .75rem; }
  .qb-fields { row-gap: .875rem; }
  .qb-fields .field__input { min-height: 2.875rem; padding-block: .625rem; }
  .qb-consent .check__label { line-height: 1.45; }
}

/* Potwierdzenie w miejscu formularza. */
.qb-done { display: grid; gap: .5rem; justify-items: start; }
.qb-done[hidden] { display: none; }
.qb-done:focus { outline: none; }
.qb-done:focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 3px; }
.qb-done__icon { width: 2.25rem; height: 2.25rem; color: var(--success); margin-bottom: .25rem; }
.qb-done__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.qb-done__when { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.qb-done__what, .qb-done__mail { color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.qb-done__what { font-size: .9375rem; color: var(--muted); }
.qb-done__link { margin-top: .5rem; }
.qb-done.is-in { animation: qb-in var(--t-enter) var(--ease-out) both; }
@keyframes qb-in { from { opacity: 0; transform: translateY(12px); } }
html.pj-still .qb-done.is-in, html.a11y-motion .qb-done.is-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .qb-done.is-in { animation-name: qb-fade; } @keyframes qb-fade { from { opacity: 0; } } }

/* ---------- 2. Bezpłatne konsultacje ---------- */
/* §20: zdjęcia sekcji 2, 3 i 7 to bleed_image() (main.css: .bleed-sec) - przyklejone do krawędzi ekranu, wygaszone maską. */
.home-free__body, .home-about__body { min-width: 0; max-width: 40rem; }
.home-free__media { --bleed-h-sm: min(78vw, 24rem); --bleed-h-md: min(52vw, 28rem); }
.home-about__media { --bleed-h-sm: min(104vw, 32rem); }
@media (min-width: 1024px) {
  /* Sekcja 2 zaczyna się tuż pod pierwszym ekranem: zdjęcie od górnej krawędzi sekcji, treść wyśrodkowana obok. */
  .home-free { --bleed-min: clamp(36rem, 24rem + 18vw, 54rem); }
  .home-about { padding-top: 0; }
  .home-about__lead { padding-block: var(--sec-y); --bleed-min: clamp(40rem, 28rem + 20vw, 60rem); }
}
.home-free__intro { margin-top: 1.5rem; margin-bottom: 1rem; color: var(--ink-2); }
.home-free__fare {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-top: 1.75rem;
  padding: 1rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.home-free__fare-name { font-weight: 600; color: var(--ink); }
.home-free__fare-meta { font-size: var(--fs-small); color: var(--muted); }
.home-free__fare-price { margin-left: auto; font-weight: 600; color: var(--ink); }
.home-free__note { margin-top: 1.5rem; color: var(--ink-2); }
.home-free__note + .home-actions { margin-top: 1rem; }

/* ---------- 3. O mnie + specjalizacje ---------- */
.home-about__title .is-break { display: block; }
.home-about__prose { margin-top: 1.5rem; color: var(--ink-2); }
/* Specjalizacje na pełną szerokość pod parą zdjęcie + tekst (zmiana rytmu względem sekcji „nagłówek | lista"). */
.home-spec { grid-column: 1 / -1; min-width: 0; margin-top: 1rem; }
.home-spec__list { list-style: none; border-top: 1px solid var(--line); }
.home-spec__item { padding: 1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .25rem; align-content: start; }
.home-spec__text { font-weight: 600; color: var(--ink); line-height: 1.4; }
.home-spec__note { font-size: var(--fs-small); color: var(--muted); }
.home-spec__sub { list-style: none; margin-top: .5rem; display: grid; gap: .25rem 2rem; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 560px) { .home-spec__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .home-spec { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .home-spec__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 7vw, 7.5rem); }
  .home-spec__item { padding: 1.25rem 0; }
}

/* ---------- 4. Pierwsza konsultacja: numerowane kroki ---------- */
.home-journey__grid { display: grid; gap: 3rem; }
.home-journey__aside { min-width: 0; }
.home-gets { margin-top: 2.5rem; max-width: 30rem; }
.home-steps { min-width: 0; border-top-color: var(--line-strong); }
.home-steps .steps__item { padding: 1.5rem 0; }
.home-steps .steps__num { padding-top: .1rem; }
.home-step { min-width: 0; }
.home-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.home-step__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.home-step__meta { font-size: var(--fs-small); color: var(--muted); }
.home-step__text { margin-top: .5rem; color: var(--ink-2); max-width: 38rem; }
.home-step__text p + p { margin-top: .75rem; }
.home-step__link { margin-top: .75rem; font-size: .9375rem; }
@media (min-width: 1024px) {
  .home-journey__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }
}

/* ---------- 5. Dlaczego warto ---------- */
.home-why__list { list-style: none; border-top: 1px solid var(--line-strong); }
.home-why__item { display: grid; gap: .2rem; padding: 1.125rem 0; border-bottom: 1px solid var(--line); }
.home-why__name { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; color: var(--ink); }
.home-why__name::first-letter { text-transform: uppercase; }
.home-why__desc { color: var(--muted); }
/* Pełna szerokość: nagłówek nad listą, lista w dwóch kolumnach (zmiana rytmu strony). */
@media (min-width: 900px) {
  .home-why .home-split { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 4vw, 3rem); }
  .home-why .home-split__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 3rem; }
  .home-why .home-split__head .home-more { margin-top: 0; }
  .home-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 7vw, 7.5rem); }
  .home-why__item { padding: 1.375rem 0; }
}

/* ---------- 6. Opinie ---------- */
.home-reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.home-reviews__intro .home-more { margin-top: 1rem; }
.home-rating { display: flex; align-items: center; gap: 1rem; margin: 0; }
.home-rating__value { font-size: 2.5rem; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.home-rating__meta { display: grid; gap: .3rem; }
.home-stars { display: inline-flex; gap: 2px; }
.home-stars__star { width: 1rem; height: 1rem; fill: var(--line-strong); }
.home-stars__star.is-on { fill: var(--gilt-ink); }
.home-rating__count { font-size: var(--fs-small); color: var(--muted); }
.home-rating__src { display: block; margin-top: .1rem; line-height: 1.2; }
/* Źródło oceny wymagane przez Google Maps Platform (P6): dokładny napis „Google Maps", krój bezszeryfowy 400, 12-16 px. */
.home-rating .rv-attr {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-style: normal;
  font-size: clamp(12px, .8125rem, 16px); letter-spacing: normal; color: #5E5E5E; white-space: nowrap;
}
.home-quotes { list-style: none; display: grid; gap: 1rem; }
.home-quotes__item { display: flex; }
.home-quote { display: grid; align-content: space-between; gap: 1.25rem; width: 100%; margin: 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.home-quote__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.home-quote__author { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.home-reviews__note { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 760px) { .home-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 7. Rodzaje wizyt ---------- */
.home-visits__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.home-visits__intro { color: var(--ink-2); max-width: 40rem; }
.home-visits__media { --bleed-h-sm: min(80vw, 26rem); --bleed-h-md: min(56vw, 30rem); }
.home-visits__list { max-width: 40rem; }
@media (min-width: 1024px) { .home-visits__band { --bleed-min: clamp(40rem, 28rem + 18vw, 58rem); } }
.home-visits__list { list-style: none; border-top: 1px solid var(--line-strong); min-width: 0; }
.home-visit { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.home-visit__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.home-visit__text { margin-top: .5rem; color: var(--ink-2); max-width: 38rem; }
.home-visit__facts { margin-top: 1rem; display: grid; gap: .5rem; font-size: .9375rem; }
.home-visit__fact { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; }
.home-visit__fact dt { color: var(--muted); }
.home-visit__fact dd { margin: 0; color: var(--ink); }
.home-visit__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1rem; font-size: .9375rem; }
.home-visit__map {
  font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .3em; text-decoration-color: var(--line-strong);
}
@media (max-width: 479px) { .home-visit__fact { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (min-width: 900px) {
  .home-visits__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }
}

/* ---------- 8-9. Czytelnia + kalkulatory ---------- */
.home-read__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-read__sub { min-width: 0; }
.home-calc { margin-top: 3.5rem; }
.home-read__main { min-width: 0; }
.home-read__head { margin-bottom: 2rem; }
.home-read__lead { margin-top: 1rem; color: var(--ink-2); max-width: 36rem; }
.home-rows { list-style: none; border-top: 1px solid var(--line-strong); }
.home-rows > li { border-bottom: 1px solid var(--line); }
.home-row { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; color: var(--ink); text-decoration: none; }
.home-row__body { display: grid; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.home-row__title { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.4; transition: color var(--t-ui) var(--ease-out); }
.home-row__text { font-size: .9375rem; color: var(--muted); line-height: 1.5; }
.home-row__meta { flex: none; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.home-row__go { flex: none; color: var(--muted); transition: color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.home-read__note { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }
.home-read__more { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 1.75rem; }
.home-calc { min-width: 0; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); align-self: start; }
.home-calc__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2-sub); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.home-calc__text { margin-top: .75rem; color: var(--ink-2); max-width: 26rem; }
.home-calc .home-more { margin-top: 1.25rem; }
@media (max-width: 479px) {
  .home-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .125rem; align-items: center; }
  .home-row__title, .home-row__meta, .home-row__body { grid-column: 1; }
  .home-row__go { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
  /* Nagłówek i podtytuł nad lewą kolumną; aside zaczyna się w tym samym wierszu co lista, więc górne linie są na jednej wysokości. */
  .home-read__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(3rem, 7vw, 7.5rem); }
  .home-read__head { grid-column: 1; grid-row: 1; }
  .home-read__sub { grid-column: 1; grid-row: 2; }
  .home-read__main { grid-column: 1; grid-row: 3; align-self: start; }
  .home-calc { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0; padding-top: 1.5rem; }
}

/* ---------- 10. Jak się zapisać? ---------- */
.home-signup__body { min-width: 0; }
.home-signup__prose { color: var(--ink-2); max-width: 38rem; font-size: var(--fs-lede); line-height: 1.6; }
.home-signup .home-actions { margin-top: 1.75rem; }

/* ---------- Najechanie (tylko precyzyjny wskaźnik) ---------- */
@media (hover: hover) and (pointer: fine) {
  .home-tel:hover, .home-visit__map:hover { color: var(--brand); text-decoration-color: currentColor; }
  .home-row:hover .home-row__title { color: var(--brand); }
  .home-row:hover .home-row__go { color: var(--brand); transform: translateX(2px); }
  .qb-type:hover { background: var(--glaze); }
  .qb-seg__opt:hover:not(:has(.qb-seg__input:checked)) { color: var(--brand); background: var(--glaze); }
  .qb-slot:hover:not(.qb-slot--ghost):not(:has(.qb-slot__input:checked)) { border-color: var(--line-control); background: var(--glaze); }
  .qb-slots__tel:hover { color: var(--brand); }
}
html.pj-still .home-row__go { transition: none; }

/* ---------- Tryby dostępności ---------- */
html.a11y-contrast .qb-group__legend, html.a11y-contrast .qb-type__meta, html.a11y-contrast .qb-slot__day,
html.a11y-contrast .qb-submit__note, html.a11y-contrast .qb-refresh__hint, html.a11y-contrast .qb-done__what,
html.a11y-contrast .home-why__desc, html.a11y-contrast .home-row__meta, html.a11y-contrast .home-row__text,
html.a11y-contrast .home-step__meta, html.a11y-contrast .home-spec__note, html.a11y-contrast .home-visit__fact dt,
html.a11y-contrast .home-read__note, html.a11y-contrast .home-free__fare-meta { color: var(--ink); }
html.a11y-contrast .home-rating .rv-attr { color: #1F1F1F; }
html.a11y-links .home-row .home-row__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Druk ---------- */
@media print {
  .hero__media, .hero__book { display: none !important; }
}

@media (max-width: 1023px) {
  .home-about__lead + .container .home-spec { margin-top: clamp(2.5rem, 8vw, 3.5rem); }
  .home-free__media + .container { margin-top: -1.75rem; }
}
@media (max-width: 1023px) { .home-visits__band .bleed + .container { margin-top: -.25rem; } }