/* HVA. Wartosci skali, kolorow i ukladu: tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--anchor-offset); scrollbar-gutter: stable; }
html.dialog-open { overflow: hidden; }
[hidden] { display: none !important; }
body {
  margin: var(--zero);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--text-leading);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, p, figure, blockquote, dl, dd) { margin: var(--zero); }
:where(ul) { margin: var(--zero); padding: var(--zero); list-style: none; }
:where(img) { display: block; max-width: var(--full); height: auto; }
:where(a) { color: inherit; text-underline-offset: var(--space-1); }
:where(a:hover) { text-decoration-thickness: var(--rule-strong); }
:where(a, summary, button):focus-visible {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: var(--focus-offset);
}
::selection { background: var(--selection-bg); color: var(--ink); }
:where(h1, h2, h3) { font-family: var(--font-display); }
:where(section, aside, footer, article, [id]) { scroll-margin-top: var(--anchor-offset); }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--page-gutter);
  z-index: var(--layer-skip);
  padding: var(--button-padding);
  transform: var(--skip-away);
  background: var(--ink);
  color: var(--surface);
}
.skip-link:focus { transform: var(--skip-visible); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--button-padding);
  border: var(--rule) solid var(--transparent);
  border-radius: var(--button-radius);
  background: var(--action);
  color: var(--on-action);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--compact-leading);
  text-align: center;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background var(--motion-fast);
}
.button:hover { background: var(--action-hover); }
.button:active { transform: var(--button-press); }
.button--large { padding: var(--button-large-padding); font-size: var(--text-md); }
.button--light { background: var(--surface); color: var(--action); }
.button--light:hover { background: var(--bg); color: var(--ink); }

.site-header__inner, .hero__inner, .affiliations__inner, .services__inner,
.team__inner, .reviews__inner, .faq__inner, .contact__inner {
  width: min(var(--page-width), calc(var(--full) - var(--page-gutter) * 2));
  margin-inline: auto;
}
.site-header { position: relative; z-index: var(--layer-header); container-type: inline-size; }
.site-header__inner {
  display: grid;
  grid-template-columns: var(--header-grid);
  grid-template-areas: var(--header-areas);
  gap: var(--header-gap);
  align-items: center;
  padding-block: var(--header-pad);
  border-bottom: var(--rule) solid var(--line);
}
.site-header__brand { grid-area: logo; justify-self: start; display: flex; align-items: center; min-height: var(--touch-target); }
.site-header__logo { width: var(--logo-width); }
.site-header__nav {
  grid-area: nav;
  display: var(--nav-display);
  /* Kolumny wedlug tresci: "Servicios" ze strzalka nie miesci sie w piatej czesci 360 px. */
  grid-template-columns: repeat(5, auto);
  justify-self: center;
  justify-content: space-between;
  width: var(--nav-width);
  gap: var(--nav-gap);
  padding: var(--nav-pad);
  border-top: var(--nav-rule) solid var(--line);
}
.site-header__nav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding-block: var(--space-1);
  font-size: var(--nav-font);
  font-weight: var(--weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
  text-align: center;
}
.site-header__nav > a:hover { text-decoration: underline; }
/* Menu Servicios: natywny details, dziala bez JS. Panel na cala szerokosc
   paska jak w Hers, na telefonie ta sama lista w jednej kolumnie jak w Hims. */
.nav-services { display: flex; justify-content: center; }
.nav-services__toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--touch-target); min-width: var(--touch-target); padding-block: var(--space-1); font-size: var(--nav-font); font-weight: var(--weight-medium); list-style: none; cursor: pointer; }
.nav-services__toggle::-webkit-details-marker { display: none; }
.nav-services__toggle:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.nav-services__chevron { width: var(--nav-chevron-size); height: var(--nav-chevron-size); flex-shrink: var(--zero); stroke: currentColor; stroke-width: var(--rule-strong); fill: none; transition: transform var(--motion-fast) var(--motion-ease); }
.nav-services[open] .nav-services__chevron { transform: var(--nav-chevron-open); }
.nav-services__panel { position: absolute; inset-inline: var(--zero); top: var(--full); padding-block: var(--nav-panel-pad); border-bottom: var(--rule) solid var(--line); background: var(--bg); box-shadow: var(--nav-panel-shadow); }
.nav-services__inner { display: grid; gap: var(--space-4); width: min(var(--page-width), calc(var(--full) - var(--page-gutter) * 2)); margin-inline: auto; }
.nav-services__list { display: grid; grid-template-columns: var(--nav-panel-columns); }
.nav-services__list li + li { border-top: var(--rule) solid var(--line); }
.nav-services__link { display: flex; align-items: center; justify-content: var(--nav-link-justify); min-height: var(--touch-target); padding: var(--space-3) var(--space-4); font-family: var(--font-display); font-size: var(--nav-panel-font); font-weight: var(--weight-medium); line-height: var(--compact-leading); text-decoration: none; overflow-wrap: anywhere; }
.nav-services__link:hover, .nav-services__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--action); text-decoration-thickness: var(--rule-strong); }
@media (min-width: 64rem) {
  .nav-services__list li + li { border-top: none; border-left: var(--rule) solid var(--line); }
}
.site-header__actions { grid-area: booking; justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.site-header__booking { padding: var(--header-booking-padding); white-space: nowrap; }
.site-header__social { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: var(--rule) solid var(--line); border-radius: var(--button-radius); color: var(--ink); }
.site-header__social:hover { background: var(--surface); color: var(--action); border-color: var(--action); }
.site-header__social svg { width: var(--header-social-size); height: var(--header-social-size); fill: currentColor; }
@container (max-width: 18em) {
  .site-header__inner { --header-grid: minmax(0, 1fr); --header-areas: "logo" "booking" "nav"; }
  .site-header__actions { justify-self: start; }
  .site-header__nav { justify-self: stretch; }
}

.hero { padding-top: var(--hero-top); }
.hero__inner {
  display: grid;
  container-type: inline-size;
  grid-template-columns: var(--hero-grid);
  grid-template-areas: var(--hero-areas);
  gap: var(--hero-gap);
  align-items: start;
  padding-bottom: var(--hero-bottom);
  border-bottom: var(--rule) solid var(--line);
}
.hero__intro { grid-area: intro; }
.hero__kicker {
  display: inline-block;
  margin-bottom: var(--hero-kicker-bottom);
  padding: var(--kicker-pad);
  background: var(--surface);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--hero-kicker-size);
  font-weight: var(--weight-medium);
  line-height: var(--compact-leading);
  letter-spacing: var(--hero-kicker-tracking);
  text-transform: none;
}
.hero__title {
  max-width: var(--hero-title-measure);
  font-size: var(--page-title);
  font-weight: var(--weight-display);
  line-height: var(--hero-title-leading);
  letter-spacing: var(--heading-tracking);
  overflow-wrap: anywhere;
}
.hero__accent { position: relative; display: inline-block; max-width: var(--full); overflow-wrap: anywhere; }
.hero__underline {
  position: absolute;
  left: var(--zero);
  bottom: var(--underline-bottom);
  width: var(--underline-width);
  height: var(--underline-height);
  overflow: visible;
  stroke: var(--brand);
  stroke-width: var(--underline-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.hero__booking { grid-area: booking; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hero__button { width: var(--booking-width); gap: var(--space-3); }
.hero__whatsapp { width: var(--hero-whatsapp-size); height: var(--hero-whatsapp-size); flex-shrink: var(--zero); fill: currentColor; }
.hero__contact { display: flex; flex: 1 1 var(--booking-aside-min); flex-direction: var(--booking-aside-direction); flex-wrap: wrap; align-items: var(--booking-aside-align); justify-content: center; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.hero__contact a { display: inline-flex; align-items: center; min-height: var(--touch-target); text-decoration: none; }
.hero__contact a:hover { text-decoration: underline; }
.hero__contact .hero__hours { color: var(--muted); }
@media (min-width: 40rem) {
  .hero__contact { flex: 0 0 auto; align-items: stretch; gap: var(--zero); }
  .hero__hours { background: repeating-linear-gradient(to right, color-mix(in srgb, var(--muted) 45%, transparent) 0 var(--space-1), transparent 0 var(--space-2)) top / 100% var(--rule) no-repeat; }
}

.hero__proof { grid-area: proof; display: grid; grid-template-columns: var(--hero-proof-grid); gap: var(--hero-proof-gap); align-items: center; padding-top: var(--space-2); container-type: inline-size; }
@container (max-width: 22em) {
  .hero__proof { --hero-proof-grid: minmax(0, 1fr); }
}
.hero__rating { display: grid; grid-template-columns: var(--hero-rating-grid); grid-template-areas: var(--hero-rating-areas); gap: var(--space-2) var(--space-4); align-items: center; align-content: start; padding: var(--hero-rating-pad); border: var(--rule) solid var(--line); border-radius: var(--review-card-radius); background: var(--surface); box-shadow: var(--review-card-shadow); text-decoration: none; }
.hero__rating-label { grid-area: label; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--compact-leading); overflow-wrap: anywhere; }
.hero__rating-label img { width: var(--hero-rating-platform-size); height: var(--hero-rating-platform-size); object-fit: contain; }
.hero__score { grid-area: score; font-family: var(--font-display); font-size: var(--hero-score-size); font-weight: var(--display-weight); line-height: var(--heading-leading); letter-spacing: var(--subheading-tracking); font-variant-numeric: tabular-nums; }
.hero__rating-scale { margin-left: var(--space-1); color: var(--muted); font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-regular); letter-spacing: normal; }
.hero__rating-source { grid-area: source; color: var(--muted); font-size: var(--text-xs); line-height: var(--compact-leading); text-decoration: none; overflow-wrap: anywhere; }
@container (max-width: 12em) {
  .hero__rating { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "score" "source"; }
  .hero__rating-scale { display: block; margin-left: var(--zero); }
}
.hero__rating:hover .hero__rating-source { text-decoration: underline; }
.hero__care-label { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--compact-leading); }
.hero__checks { display: grid; gap: var(--space-3); }
.hero__checks li { display: grid; grid-template-columns: var(--hero-check-size) minmax(var(--zero), 1fr); gap: var(--space-2); align-items: start; font-size: var(--text-sm); line-height: var(--compact-leading); }
.hero__checks svg { width: var(--hero-check-size); height: var(--hero-check-size); color: var(--action); stroke: currentColor; stroke-width: var(--hero-check-stroke); stroke-linecap: round; stroke-linejoin: round; }

.hero__visual { grid-area: photo; position: relative; align-self: center; justify-self: center; width: var(--hero-visual-width); margin-bottom: var(--hero-visual-bottom); }
.hero__photo-frame { width: 100%; aspect-ratio: var(--hero-photo-ratio); overflow: hidden; border-radius: var(--photo-radius); }
.hero__image { position: relative; top: calc(0px - var(--hero-scroll-distance)); width: 100%; height: calc(100% + var(--hero-scroll-distance) + var(--hero-scroll-distance)); object-fit: cover; object-position: var(--hero-photo-position); transform: translate3d(0, var(--hero-scroll-offset, 0px), 0) scale(var(--hero-scroll-zoom, 1)); }
.hero__photo-frame.is-motion-active .hero__image { will-change: transform; }
.hero__testimonial {
  position: var(--hero-quote-position);
  z-index: var(--card-copy-layer);
  left: var(--hero-quote-left);
  right: var(--hero-quote-right);
  bottom: var(--hero-quote-bottom);
  max-width: var(--hero-quote-max);
  margin: var(--hero-quote-margin);
  padding: var(--hero-quote-pad);
  background: var(--surface);
  border-left: var(--hero-quote-border) solid var(--action);
  border-radius: var(--photo-radius);
  box-shadow: var(--hero-quote-shadow);
}
.hero__testimonial blockquote { font-family: var(--font-display); font-size: var(--hero-quote-size); font-weight: var(--weight-medium); line-height: var(--quote-leading); letter-spacing: var(--subheading-tracking); overflow-wrap: anywhere; }
.hero__testimonial blockquote p::before { content: open-quote; }
.hero__testimonial blockquote p::after { content: close-quote; }
.hero__testimonial figcaption { display: grid; gap: var(--space-2); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.hero__reviewer { color: var(--ink); font-weight: var(--weight-semibold); }
.hero__review-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.hero__review-rating { display: inline-flex; gap: var(--space-2); align-items: center; }
.hero__stars { display: block; width: var(--review-stars-width); height: var(--review-star-size); fill: var(--review-star-color); }
.hero__review-source { display: flex; align-items: center; gap: var(--space-2); }
.hero__review-source img { width: var(--review-source-size); height: var(--review-source-size); object-fit: contain; }

@media (min-width: 64rem) {
  .hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--hero-header-size) - var(--hero-viewport-gap)); }
  .hero__inner { flex: 1; align-content: center; }
  .hero__contact a { min-height: var(--space-7); }
}

.affiliations { container-type: inline-size; }
.affiliations__inner { padding: var(--affiliations-padding); }
.affiliations__heading { margin-bottom: var(--space-6); font-family: var(--font-display); font-size: var(--affiliations-heading-size); font-weight: var(--weight-medium); line-height: var(--compact-leading); }
.affiliations__list { display: grid; grid-template-columns: var(--affiliations-grid); gap: var(--affiliations-gap); }
.affiliations__item { display: grid; grid-template-columns: var(--affiliation-grid); align-items: start; gap: var(--space-4); }
.affiliations__mark { display: flex; align-items: center; justify-content: center; width: var(--affiliation-mark-width); height: var(--affiliation-mark-height); padding: var(--space-2); border-radius: var(--photo-radius); background: var(--surface); }
.affiliations__logo { width: var(--full); max-height: var(--full); object-fit: contain; }
.affiliations__logo--hospital { max-width: var(--affiliation-hospital-width); }
.affiliations__institution { font-family: var(--font-display); font-size: var(--affiliation-heading); font-weight: var(--weight-semibold); line-height: var(--compact-leading); overflow-wrap: anywhere; }
.affiliations__person { margin-top: var(--space-2); font-size: var(--text-xs); line-height: var(--compact-leading); overflow-wrap: anywhere; }
.affiliations__person span { color: var(--muted); overflow-wrap: anywhere; }
@container (max-width: 18em) {
  .affiliations__item { --affiliation-grid: minmax(0, 1fr); }
}

.services { padding-block: var(--services-top) var(--services-bottom); background: var(--action); color: var(--surface); }
.services__inner { display: grid; grid-template-columns: var(--services-layout-grid); grid-template-areas: var(--services-layout-areas); gap: var(--services-layout-gap); align-items: stretch; }
/* Kreska pod naglowkiem: Maks wskazal ten uklad jako ten, ktory mu siadal.
   Naglowek dostal tez wlasny, mniejszy rozmiar, bo mial do 60 px i zjadal ekran. */
.services__heading {
  grid-area: heading;
  align-items: start;
  padding-bottom: var(--services-head-pad);
  border-bottom: var(--rule) solid var(--line-on-action);
}
.services__label, .team__label, .reviews__label, .faq__label, .contact__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.services__title, .team__title, .reviews__title, .faq__title {
  font-size: var(--page-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  overflow-wrap: anywhere;
}
.services__title { margin-top: var(--space-4); font-size: var(--services-title-size); }
.services__grid {
  grid-area: cards;
  display: grid;
  width: min(var(--full), var(--services-grid-max));
  margin-inline: auto;
  grid-template-columns: var(--services-grid);
  grid-template-areas: var(--services-grid-areas);
  gap: var(--services-grid-gap);
  align-items: stretch;
}
#fisioterapia { grid-area: physio; }
#psicologia { grid-area: psychology; }
#entrenamiento { grid-area: training; }
#medicina { grid-area: medicine; }
.service {
  position: relative;
  min-width: var(--zero);
  width: min(var(--full), var(--service-card-max));
  overflow: hidden;
  background: var(--service-card-bg);
  color: var(--ink);
  border-radius: var(--service-card-radius);
  box-shadow: var(--service-card-shadow);
  align-self: center;
  transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
.service__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: var(--service-card-min);
  height: var(--full);
  padding: var(--service-card-pad);
  color: inherit;
  text-decoration: none;
}
.service__link:focus-visible { outline-offset: var(--focus-inset); }
.service__title { font-family: var(--font-display); font-size: var(--service-card-heading); font-weight: var(--weight-semibold); line-height: var(--service-title-leading); letter-spacing: var(--subheading-tracking); overflow-wrap: anywhere; }
.service__art { display: block; align-self: center; width: min(var(--full), var(--service-art-size)); height: var(--service-art-height); object-fit: cover; mix-blend-mode: multiply; filter: var(--service-art-filter); }
.service__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--service-footer-min); margin-top: auto; }
.service__open { display: var(--service-open-display); place-items: center; flex-shrink: 0; width: var(--service-open-size); height: var(--service-open-size); border-radius: var(--radius-pill); color: var(--contact-panel-bg); transition: color var(--motion-fast), background var(--motion-fast); }
.service__open svg { width: var(--service-open-icon); height: var(--service-open-icon); stroke: currentColor; stroke-width: var(--service-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.service:hover, .service:focus-within { background: var(--service-card-hover-bg); box-shadow: var(--service-card-hover-shadow); }
.service:hover .service__open, .service:focus-within .service__open { background: var(--contact-panel-bg); color: var(--surface); }

.services__figure {
  grid-area: figure;
  position: relative;
  justify-self: center;
  align-self: center;
  width: min(var(--full), var(--services-figure-width));
  height: var(--services-figure-height);
  pointer-events: none;
}
.services__figure::after {
  content: "";
  position: absolute;
  bottom: var(--services-figure-ground-bottom);
  left: calc((var(--full) - var(--services-figure-ground-width)) / 2);
  width: var(--services-figure-ground-width);
  height: var(--services-figure-ground-height);
  border-radius: var(--radius-pill);
  background: var(--services-figure-ground);
  filter: blur(var(--services-figure-ground-blur));
  z-index: var(--zero);
}
.services__figure-fallback, .services__figure-canvas { display: block; width: var(--full); height: var(--full); }
.services__figure-fallback { position: relative; z-index: var(--card-copy-layer); object-fit: contain; }
.services__figure-canvas { position: absolute; z-index: var(--card-copy-layer); inset: var(--zero); display: none; }
.services__figure.is-webgl .services__figure-fallback { display: none; }
.services__figure.is-webgl .services__figure-canvas { display: block; }
.services__figure-caption { position: absolute; bottom: var(--services-figure-caption-bottom); inset-inline: var(--zero); color: var(--surface); font-size: var(--text-xs); font-weight: var(--weight-medium); text-align: center; opacity: 0; transition: opacity var(--motion-medium) var(--motion-ease); }
.services__figure[data-active] .services__figure-caption { opacity: 1; }

.services__drawing { grid-area: drawing; display: block; width: var(--services-drawing-width); max-width: var(--full); height: var(--services-drawing-height); margin-left: auto; stroke: var(--brand); stroke-width: var(--services-drawing-stroke); stroke-linecap: round; stroke-linejoin: round; }

.team, .reviews, .faq { padding-block: var(--section-space); }
.team { container-type: inline-size; }
.team__heading { display: grid; grid-template-columns: var(--section-heading-grid); gap: var(--space-4); align-items: var(--section-heading-align); margin-bottom: var(--section-gap); }
.team__label, .reviews__label, .faq__label { color: var(--muted); }
.team__title { font-size: var(--services-title-size); }
.team__list { display: grid; grid-template-columns: var(--team-columns); gap: var(--team-card-gap); align-items: stretch; }
@container (max-width: 18em) {
  .team__list { --team-columns: minmax(0, 1fr); }
}
.person { position: relative; display: flex; flex-direction: column; min-width: var(--zero); border: var(--rule) solid var(--line); border-radius: var(--photo-radius); background: var(--surface); box-shadow: var(--person-shadow); transition: transform var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) var(--motion-ease); }
.person__photo { position: relative; z-index: var(--card-copy-layer); width: var(--full); height: auto; aspect-ratio: var(--person-photo-ratio); object-fit: cover; object-position: var(--person-photo-position); border-radius: var(--photo-radius) var(--photo-radius) var(--zero) var(--zero); pointer-events: none; }
.person__photo--right { object-position: var(--person-photo-right); }
.person__info { position: relative; z-index: var(--card-copy-layer); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); min-height: var(--person-info-height); padding: var(--person-info-pad); pointer-events: none; }
.person__name { font-size: var(--person-heading); font-weight: var(--weight-semibold); line-height: var(--compact-leading); letter-spacing: var(--subheading-tracking); overflow-wrap: anywhere; }
.person__role { color: var(--muted); font-size: var(--text-xs); line-height: var(--compact-leading); overflow-wrap: anywhere; }
/* Podpis jest dekoracja, ta sama rola jest czytelnie podana nad nim. */
.person__signature { width: min(var(--full), var(--person-signature-width)); height: var(--person-signature-height); object-fit: contain; margin-top: auto; mix-blend-mode: multiply; }
.person__open { position: absolute; inset: var(--zero); width: var(--full); height: var(--full); padding: var(--zero); border: var(--zero); border-radius: inherit; background: var(--transparent); color: var(--ink); cursor: pointer; }
.person__open:focus-visible { outline-offset: var(--focus-inset); }
.person__hint { position: absolute; z-index: var(--card-hint-layer); top: var(--space-3); left: var(--person-hint-center); max-width: calc(var(--full) - var(--space-3) * 2); padding: var(--person-hint-pad); border-radius: var(--button-radius); background: var(--surface); color: var(--action-hover); box-shadow: var(--review-card-shadow); font-family: var(--font-body); font-size: var(--person-hint-size); font-weight: var(--weight-medium); overflow-wrap: anywhere; transform: var(--person-hint-shown); transition: opacity var(--motion-fast), transform var(--motion-fast) var(--motion-ease); }
.person:focus-within { box-shadow: var(--person-hover-shadow); }

/* Ocena zbiorcza trafila do hero, cytaty wykorzystuja cala szerokosc. */
.reviews { background: var(--surface); }
.reviews__heading { display: grid; grid-template-columns: var(--reviews-heading-grid); gap: var(--space-4) var(--section-gap); align-items: end; margin-bottom: var(--space-7); }
.reviews__title { margin-top: var(--space-4); font-size: var(--services-title-size); }
.reviews__source { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.reviews__carousel { display: block; }
.reviews__carousel.is-ready { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "track" "controls"; gap: var(--space-5); }
.reviews__track { grid-area: track; display: flex; align-items: stretch; gap: var(--reviews-gap); min-width: var(--zero); margin: var(--zero); padding: var(--reviews-track-pad); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--reviews-scroll-pad); scrollbar-width: none; }
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__slide { display: flex; flex: 0 0 calc((100% - (var(--reviews-per-view) - 1) * var(--reviews-gap)) / var(--reviews-per-view)); scroll-snap-align: start; }
.reviews__controls { grid-area: controls; display: flex; justify-content: center; align-items: center; gap: var(--space-4); }
.reviews__controls[hidden] { display: none; }
.reviews__nav { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); padding: var(--zero); border: var(--rule) solid var(--action); border-radius: var(--radius-pill); background: var(--surface); color: var(--action); cursor: pointer; }
.reviews__nav svg { width: var(--reviews-arrow-size); height: var(--reviews-arrow-size); }
.reviews__nav:hover:not(:disabled) { background: var(--bg); }
.reviews__nav:disabled { visibility: hidden; }
.reviews__counter { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.reviews__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reviews__link { display: inline-flex; align-items: center; gap: var(--space-3); justify-self: start; min-height: var(--touch-target); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.reviews__link img { width: var(--reviews-platform-size); height: var(--reviews-platform-size); object-fit: contain; }
.reviews__card { display: flex; flex-direction: column; width: 100%; gap: var(--space-5); padding: var(--review-card-pad); border: var(--rule) solid var(--line); border-radius: var(--review-card-radius); background: var(--bg); box-shadow: var(--review-card-shadow); }
.reviews__card--featured { background: var(--review-featured-bg); border-color: var(--review-featured-line); }

@media (min-width: 40rem) and (max-width: 63.999rem) {
  .reviews__track::after { content: ""; flex: 0 0 calc((100% - var(--reviews-gap)) / 2); }
}
.reviews__identity { display: grid; grid-template-columns: var(--review-avatar-size) minmax(var(--zero), 1fr) var(--review-source-mark-size); align-items: center; gap: var(--space-3); }
.reviews__avatar { width: var(--review-avatar-size); height: var(--review-avatar-size); border-radius: var(--radius-pill); object-fit: cover; }
.reviews__byline { display: grid; min-width: var(--zero); gap: var(--space-1); }
.reviews__date { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; line-height: var(--compact-leading); overflow-wrap: anywhere; }
.reviews__platform { align-self: start; width: var(--review-source-mark-size); height: var(--review-source-mark-size); object-fit: contain; }
.reviews__stars { display: block; width: var(--review-stars-width); height: var(--review-star-size); fill: var(--review-star-color); flex-shrink: var(--zero); }
.reviews__card blockquote { font-family: var(--font-body); font-size: var(--review-text-size); font-weight: var(--weight-regular); line-height: var(--text-leading); }
.reviews__author { color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

.faq__inner { display: grid; grid-template-columns: var(--faq-grid); gap: var(--section-gap); }
.faq__title { margin-top: var(--space-5); }
.faq__note { max-width: var(--hero-note-width); margin-top: var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.faq__illustration { display: block; width: min(var(--full), var(--faq-image-width)); height: auto; margin-top: var(--faq-image-offset); }
.faq__item { border-top: var(--rule) solid var(--line-strong); }
.faq__item:last-of-type { border-bottom: var(--rule) solid var(--line-strong); }
/* Jawna luka zamiast zmyslonej odpowiedzi. Znika, gdy klinika poda dane. */
.faq__pending { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.faq__item summary { display: grid; grid-template-columns: var(--faq-number-width) minmax(0, 1fr) var(--faq-symbol-width); align-items: center; gap: var(--space-4); padding: var(--faq-summary-pad); list-style: none; cursor: pointer; font-size: var(--faq-summary-size); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__number { color: var(--action-hover); font-family: var(--font-display); font-size: var(--faq-number-size); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.faq__question { min-width: 0; overflow-wrap: anywhere; }
.faq__symbol { flex-shrink: var(--zero); width: var(--faq-symbol-width); font-size: var(--faq-symbol-size); line-height: var(--heading-leading); text-align: center; transform: var(--faq-symbol-closed); }
.faq__item[open] .faq__symbol { transform: var(--faq-symbol-open); }
.faq__item > p { padding: var(--zero) var(--zero) var(--space-6) var(--faq-answer-indent); color: var(--muted); overflow-wrap: anywhere; }
.faq__item > p a { display: inline-flex; align-items: center; min-height: var(--touch-target); }

.contact { --muted: var(--contact-muted); padding-top: var(--section-space); background: var(--footer-bg); }
.contact__invitation { display: grid; grid-template-columns: var(--contact-invitation-grid); align-items: center; gap: var(--space-7); padding: var(--contact-panel-pad); margin-bottom: var(--section-gap); border-radius: var(--service-card-radius); background: var(--contact-panel-bg); color: var(--on-action); }
.contact__invitation-label { font-size: var(--text-sm); }
.contact__invitation-title { margin-top: var(--space-3); font-size: var(--contact-invitation-size); font-weight: var(--weight-semibold); line-height: var(--heading-leading); letter-spacing: var(--heading-tracking); overflow-wrap: anywhere; }
.contact__booking { justify-self: start; gap: var(--space-3); max-width: var(--full); white-space: normal; overflow-wrap: anywhere; text-align: center; }
.contact__booking:focus-visible { outline-color: var(--surface); }
.contact__grid { display: grid; grid-template-columns: var(--contact-grid); gap: var(--section-gap); }
.contact__title { margin-top: var(--space-5); font-size: var(--contact-address-size); font-weight: var(--weight-semibold); line-height: var(--heading-leading); letter-spacing: var(--heading-tracking); }
.contact__address { margin-top: var(--space-5); font-size: var(--text-sm); font-style: normal; }
.contact__data { display: grid; grid-template-columns: var(--contact-data-grid); gap: var(--space-7); margin-block: var(--space-8); }
.contact__data h3 { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.contact__channels { display: flex; flex-direction: column; align-items: start; }
.contact__channels a { display: flex; align-items: center; max-width: var(--full); min-height: var(--touch-target); padding-block: var(--space-1); overflow-wrap: anywhere; font-size: var(--text-sm); }
.contact__hours dl { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.contact__hours dt { color: var(--muted); }
.contact__hours dd { font-variant-numeric: tabular-nums; }
.contact__hours > p { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-xs); }
.contact__map { display: grid; grid-template-rows: minmax(var(--map-min-height), 1fr) auto; gap: var(--space-3); }
.contact__map-frame { width: var(--full); height: var(--full); min-height: var(--map-min-height); border: var(--zero); border-radius: var(--map-radius); background: var(--bg); }
.contact__map-link { justify-self: start; min-height: var(--touch-target); padding-block: var(--space-2); font-size: var(--text-sm); }
.contact__footer { display: grid; grid-template-columns: var(--footer-grid); gap: var(--footer-gap); align-items: center; margin-top: var(--section-space); padding-block: var(--footer-pad); border-top: var(--rule) solid var(--line-strong); }
.contact__logo { width: var(--footer-logo-width); }
.contact__legal, .contact__concept { color: var(--muted); font-size: var(--text-xs); }
.contact__concept { justify-self: var(--footer-align); }
.contact__credits { max-width: var(--credits-measure); }
.contact__credits summary { width: fit-content; min-height: var(--touch-target); padding-block: var(--space-2); cursor: pointer; }
.contact__credits p { padding-bottom: var(--space-2); }
.contact__credits a { color: inherit; text-underline-offset: var(--space-1); }

/* Natywny dialog odpowiada za fokus, Escape i nieaktywne tlo. */
.content-dialog { width: min(var(--dialog-width), calc(var(--full) - var(--dialog-gutter) * 2)); max-width: none; max-height: var(--dialog-max-height); margin: auto; padding: var(--zero); overflow-y: auto; border: var(--zero); border-radius: var(--dialog-radius); background: var(--bg); color: var(--ink); box-shadow: var(--dialog-shadow); overscroll-behavior: contain; container-type: inline-size; }
.content-dialog::backdrop { background: var(--dialog-backdrop); }
.content-dialog[open] { animation: dialog-enter var(--motion-medium) var(--motion-ease); }
.content-dialog__topbar { position: sticky; top: var(--zero); z-index: var(--dialog-top-layer); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--dialog-topbar-height); padding: var(--space-1) var(--dialog-pad); border-bottom: var(--rule-strong) solid var(--action); background: var(--bg); font-size: var(--text-xs); overflow-wrap: anywhere; }
.content-dialog__close { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: var(--rule) solid var(--review-author-line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; }
.content-dialog__close:hover { background: var(--ink); color: var(--surface); }
.content-dialog__close svg { width: var(--dialog-icon-size); height: var(--dialog-icon-size); stroke: currentColor; stroke-width: var(--rule-strong); fill: none; }
.content-dialog__service-grid { display: grid; grid-template-columns: var(--dialog-service-grid); grid-template-areas: var(--dialog-service-areas); column-gap: var(--dialog-service-gap); row-gap: var(--dialog-service-row-gap); align-items: start; padding: var(--dialog-pad); }
.content-dialog__service-heading { grid-area: heading; min-width: 0; align-self: center; }
.content-dialog__service-titleline { display: flex; align-items: center; gap: var(--space-4); }
.content-dialog__service-titleline .content-dialog__art { flex: 0 0 var(--dialog-heading-art); width: var(--dialog-heading-art); height: var(--dialog-heading-art); object-fit: contain; border-radius: var(--photo-radius); }
@container (max-width: 12em) {
  .content-dialog__service-titleline { flex-direction: column; align-items: flex-start; }
}
.content-dialog__photo { grid-area: photo; min-width: 0; }
.content-dialog__photo img { width: 100%; aspect-ratio: var(--dialog-photo-ratio); object-fit: cover; border-radius: var(--photo-radius); }
.content-dialog__photo figcaption { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); line-height: var(--compact-leading); }
.content-dialog__service-grid .content-dialog__body { grid-area: body; gap: var(--dialog-detail-gap); padding: var(--zero); }
.content-dialog__service-grid .content-dialog__footer { grid-area: footer; display: grid; gap: var(--space-3); padding: var(--space-3) var(--zero) var(--zero); border-top: var(--rule) solid var(--line); }
.content-dialog__service-grid .content-dialog__list { grid-template-columns: repeat(var(--dialog-detail-columns), minmax(0, 1fr)); gap: var(--dialog-detail-gap); }
.content-dialog__service-grid .content-dialog__list > div { min-width: var(--zero); padding: var(--dialog-detail-pad); border: var(--rule) solid var(--dialog-detail-border); border-top: var(--rule-strong) solid var(--action); border-radius: var(--dialog-detail-radius); background: var(--dialog-detail-bg); }
.content-dialog__service-grid .content-dialog__list dt { font-size: var(--text-sm); }
.content-dialog__service-grid .content-dialog__list dd { font-size: var(--dialog-detail-text-size); line-height: var(--dialog-detail-leading); }
.content-dialog__service-grid .content-dialog__intro { margin-top: var(--space-3); font-size: var(--text-md); }
.content-dialog__service-grid .content-dialog__section h3 { margin-bottom: var(--space-3); font-size: var(--dialog-service-section-size); }
.content-dialog__service-grid .content-dialog__section--team { display: grid; gap: var(--space-1); }
.content-dialog__service-grid .content-dialog__section--team h3 { margin: var(--zero); color: var(--action-hover); font-size: var(--text-sm); }
.content-dialog__service-grid .content-dialog__section--team p { color: var(--muted); font-size: var(--text-sm); }
.content-dialog__service-grid--medicine .content-dialog__body { grid-template-columns: var(--dialog-medicine-grid); }
.content-dialog__service-grid--medicine .content-dialog__list { grid-column: 1 / -1; grid-template-columns: repeat(var(--dialog-medicine-list-columns), minmax(0, 1fr)); }
.content-dialog__service-grid--medicine .content-dialog__section p { font-size: var(--text-sm); }
.content-dialog__person-grid { display: grid; grid-template-columns: var(--dialog-person-grid); gap: var(--dialog-person-gap); align-items: start; padding: var(--dialog-pad); }
.content-dialog__person-photo { width: min(100%, var(--dialog-person-mobile-width)); aspect-ratio: var(--person-photo-ratio); object-fit: cover; border-radius: var(--photo-radius); }
.content-dialog__person-photo--right { object-position: var(--person-photo-right); }
.content-dialog__person-copy { min-width: 0; }
.content-dialog__person-copy .content-dialog__role { margin-top: var(--space-3); font-size: var(--text-md); }
.content-dialog__person-copy .content-dialog__body { gap: 0; margin-top: var(--dialog-person-body-offset); padding: var(--space-5) 0 0; border-top: var(--rule) solid var(--line); }
.content-dialog__hero { display: grid; grid-template-columns: var(--dialog-hero-grid); gap: var(--space-5); align-items: center; padding: var(--space-3) var(--dialog-pad) var(--dialog-pad); background: var(--service-card-bg); }
.content-dialog__hero--person { background: var(--bg); }
.content-dialog__role { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.content-dialog__art { width: var(--full); height: auto; border-radius: var(--photo-radius); }
.content-dialog__title { min-width: var(--zero); font-size: var(--dialog-title-size); font-weight: var(--weight-semibold); line-height: var(--heading-leading); letter-spacing: var(--heading-tracking); overflow-wrap: anywhere; }
.content-dialog__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding: var(--dialog-pad); }
.content-dialog__intro { font-size: var(--text-md); }
.content-dialog__section { min-width: var(--zero); overflow-wrap: anywhere; }
.content-dialog__section h3 { margin-bottom: var(--space-4); font-size: var(--dialog-section-size); line-height: var(--compact-leading); font-weight: var(--weight-semibold); }
.content-dialog__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.content-dialog__list > div { padding-top: var(--space-4); border-top: var(--rule) solid var(--line); }
.content-dialog__list dt { font-weight: var(--weight-semibold); }
.content-dialog__list dd { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.content-dialog__section p + p { margin-top: var(--space-3); }
.content-dialog__footer { padding: var(--zero) var(--dialog-pad) var(--dialog-pad); }
.content-dialog__footer .button { max-width: var(--full); white-space: normal; overflow-wrap: anywhere; text-align: center; }
@media (min-width: 48rem) {
  .content-dialog__service-grid .content-dialog__photo img { height: var(--dialog-photo-height); aspect-ratio: auto; }
  .content-dialog__service-grid--fisioterapia { grid-template-columns: var(--dialog-physio-grid); }
  .content-dialog__service-grid--fisioterapia .content-dialog__photo img { height: auto; aspect-ratio: var(--dialog-physio-photo-ratio); }
  .content-dialog__service-grid .content-dialog__footer { display: flex; align-items: center; justify-content: flex-end; }
  .content-dialog__service-grid .content-dialog__footer--team { justify-content: space-between; }
  .content-dialog__service-grid .content-dialog__footer .button { flex-shrink: var(--zero); white-space: nowrap; }
  .content-dialog__service-grid--medicine .content-dialog__body > .content-dialog__section:first-child { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dialog-detail-gap); align-content: start; }
  .content-dialog__service-grid--medicine .content-dialog__body > .content-dialog__section:first-child h3 { grid-column: 1 / -1; }
  .content-dialog__service-grid--medicine .content-dialog__body > .content-dialog__section:first-child p + p { margin-top: var(--zero); }
  .content-dialog__person-photo { width: 100%; }
}
@keyframes dialog-enter { from { opacity: var(--zero); transform: var(--dialog-start); } to { opacity: 1; transform: var(--motion-rest); } }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: var(--button-lift); box-shadow: var(--button-shadow); }
  .button:active { transform: var(--button-press); }
  .service:hover, .service:focus-within { transform: var(--button-lift); }
  .person__hint { opacity: var(--zero); transform: var(--person-hint-hidden); }
  .person:hover, .person:focus-within { transform: var(--card-lift); box-shadow: var(--person-hover-shadow); }
  .person:hover .person__hint, .person__open:focus-visible .person__hint { opacity: 1; transform: var(--person-hint-shown); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__image { transform: none; }
}