/*
 * SPK GROUP – arkusz strony głównej i podstron.
 *
 * Materiał: beton, kreda i granat nocnej budowy. Jedyny mocny akcent
 * to pomarańcz łaty niwelacyjnej – na przyciskach (zawsze z granatowym
 * tekstem) i na podziałce w sekcji etapów. Jedna rodzina pisma (Archivo)
 * gra szerokością: nagłówki są zwężone, tekst ciągły ma szerokość normalną.
 */

/* ----------------------------------------------------------------- tokeny */
:root {
  --c-beton: #E8E9E5;
  --c-kreda: #F6F6F3;
  --c-granat: #0F1D2E;
  --c-granat-2: #182A40;
  --c-stal: #4F5B67;
  --c-blekit: #1E72B8;
  --c-sygnal: #FF6B2C;
  --c-sygnal-jasny: #FF8A57;
  --c-sygnal-ciemny: #C2410C;
  --c-blad: #B91C1C;
  --c-blad-jasny: #FCA5A5;

  --kreska: rgb(15 29 46 / 0.14);
  --kreska-jasna: rgb(246 246 243 / 0.16);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --waski: 74%;

  --margines: clamp(1rem, 4vw, 3.5rem);
  --wys-naglowka: 4.5rem;
  --r-maly: 4px;
  --r: 6px;

  --krzywa: cubic-bezier(0.22, 1, 0.36, 1);
  --czas-krotki: 0.2s;

  --z-naglowek: 30;
  --z-menu: 40;
  --z-plywajacy: 45;
  --z-cookies: 50;
  --z-zaslona: 60;
}

/* -------------------------------------------------------------------- baza */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--wys-naglowka);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--c-granat);
  color: var(--c-granat);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.brak-przewijania {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-blekit);
  outline-offset: 3px;
}

.etapy :focus-visible,
.stopka :focus-visible,
.hero :focus-visible,
.menu-mobilne :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--c-sygnal);
}

[hidden] {
  display: none !important;
}

.ukryte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pomin-do-tresci {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--r);
  background: var(--c-sygnal);
  color: var(--c-granat);
  font-weight: 600;
  transform: translateY(-200%);
}

.pomin-do-tresci:focus {
  transform: none;
}

.tytul-sekcji {
  font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5.25rem);
  font-stretch: var(--waski);
  font-weight: 420;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ------------------------------------------------------------- przyciski */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--r-maly);
  background: var(--c-sygnal);
  color: var(--c-granat);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--czas-krotki) var(--krzywa);
}

.przycisk:hover {
  background: var(--c-sygnal-jasny);
}

.przycisk--maly {
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.9375rem;
}

.przycisk--pelny {
  width: 100%;
}

.przycisk__spinner {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: obrot 0.8s linear infinite;
}

.przycisk.jest-zajety {
  pointer-events: none;
  opacity: 0.8;
}

.przycisk.jest-zajety .przycisk__spinner {
  display: inline-block;
}

@keyframes obrot {
  to { transform: rotate(360deg); }
}

.przycisk-tekst {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 0.25rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-underline-offset var(--czas-krotki) var(--krzywa);
}

.przycisk-tekst:hover {
  text-underline-offset: 0.2em;
}

.przycisk-tekst--jasny {
  color: var(--c-kreda);
}

.przycisk-obrys {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--c-granat);
  border-radius: var(--r-maly);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--czas-krotki) var(--krzywa);
}

.przycisk-obrys:hover {
  background: rgb(15 29 46 / 0.06);
}

/* --------------------------------------------------------------- nagłówek */
.naglowek {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-naglowek);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--wys-naglowka);
  padding-inline: var(--margines);
  color: var(--c-kreda);
  transition: background-color 0.3s var(--krzywa), color 0.3s var(--krzywa), box-shadow 0.3s var(--krzywa);
}

.naglowek.jest-przyklejony {
  background: var(--c-beton);
  color: var(--c-granat);
  box-shadow: 0 1px 0 var(--kreska);
}

.naglowek__marka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin-right: auto;
  font-size: 1.125rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.naglowek__marka img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-kreda);
}

.naglowek__nawigacja {
  display: none;
  gap: 0.25rem;
}

.naglowek__nawigacja a {
  position: relative;
  padding: 0.6rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.naglowek__nawigacja a::after {
  content: "";
  position: absolute;
  inset: auto 0.75rem 0.35rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--krzywa);
}

.naglowek__nawigacja a:hover::after,
.naglowek__nawigacja a[aria-current="true"]::after {
  transform: none;
}

.naglowek__telefon {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.naglowek__cta {
  display: none;
}

.naglowek__menu {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.naglowek__kreski,
.naglowek__kreski::before {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--krzywa);
}

.naglowek__kreski {
  position: relative;
  transform: translateY(-4px);
}

.naglowek__kreski::before {
  content: "";
  position: absolute;
  top: 8px;
}

.naglowek__menu[aria-expanded="true"] .naglowek__kreski {
  transform: translateY(0) rotate(45deg);
}

.naglowek__menu[aria-expanded="true"] .naglowek__kreski::before {
  transform: translateY(-8px) rotate(-90deg);
}

.naglowek:has(.naglowek__menu[aria-expanded="true"]) {
  background: var(--c-granat);
  color: var(--c-kreda);
  box-shadow: none;
}

@media (min-width: 40em) {
  .naglowek__cta { display: inline-flex; }
}

@media (min-width: 48em) {
  .naglowek__telefon { display: inline-flex; }
}

@media (min-width: 62em) {
  .naglowek__nawigacja { display: flex; }
  .naglowek__menu { display: none; }
  .naglowek__marka { margin-right: 0; }
  .naglowek__nawigacja { margin-inline: auto; }
}

.menu-mobilne {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: var(--wys-naglowka) var(--margines) 2rem;
  background: var(--c-granat);
  color: var(--c-kreda);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s var(--krzywa), visibility 0s linear 0.5s;
}

.menu-mobilne.jest-otwarte {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path 0.5s var(--krzywa), visibility 0s;
}

.menu-mobilne a {
  padding: 0.35rem 0;
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-stretch: var(--waski);
  font-weight: 420;
  line-height: 1.1;
  text-decoration: none;
}

.menu-mobilne .menu-mobilne__telefon {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 2rem;
  font-size: 1.25rem;
  font-stretch: 100%;
  color: var(--c-sygnal);
}

@media (min-width: 62em) {
  .menu-mobilne { display: none; }
}

/* ---------------------------------------------------------- układ strony */
.strona {
  position: relative;
  z-index: 1;
  background: var(--c-beton);
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(36rem, 100svh);
  padding: calc(var(--wys-naglowka) + 2rem) var(--margines) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  background: var(--c-granat);
  color: var(--c-kreda);
}

.hero__foto {
  position: absolute;
  inset: 0;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Przyciemnienie od dołu niesie kontrast tekstu – bez niego biel na piasku znika */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(15 29 46 / 0.92) 0%, rgb(15 29 46 / 0.55) 38%, rgb(15 29 46 / 0) 70%),
    linear-gradient(to bottom, rgb(15 29 46 / 0.7) 0%, rgb(15 29 46 / 0) 24%);
}

.hero__tresc {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__tytul {
  font-size: clamp(3.25rem, 0.8rem + 8.4vw, 9.25rem);
  font-stretch: 70%;
  font-weight: 420;
  line-height: 0.9;
  letter-spacing: -0.025em;
}

/* Fraza, pod którą ludzie szukają firmy – w H1, ale jako cicha etykieta nad hasłem */
.hero__nadtytul {
  display: block;
  margin-bottom: 0.9rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  font-stretch: 100%;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(246 246 243 / 0.92);
  /* Etykieta leży na jasnym piasku zdjęcia – cień trzyma kontrast bez tła */
  text-shadow: 0 1px 2px rgb(15 29 46 / 0.7), 0 0 18px rgb(15 29 46 / 0.55);
}

.linia {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.linia > span {
  display: block;
}

.hero__dol {
  display: grid;
  gap: 1.25rem;
}

.hero__opis {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: rgb(246 246 243 / 0.88);
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.hero__podpis {
  position: absolute;
  right: var(--margines);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: none;
  font-size: 0.8125rem;
  color: rgb(246 246 243 / 0.7);
}

@media (min-width: 62em) {
  .hero__dol {
    grid-template-columns: minmax(0, 34rem) auto;
    align-items: end;
    justify-content: start;
    gap: 3rem;
  }
  .hero__podpis { display: block; }
}

/* ------------------------------------------------------- zdanie z liczbami */
.zdanie {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--margines) clamp(3rem, 6vw, 5rem);
}

.zdanie__tekst {
  max-width: 28ch;
  font-size: clamp(1.75rem, 0.9rem + 3vw, 3.5rem);
  font-stretch: 86%;
  font-weight: 360;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

@media (min-width: 62em) {
  .zdanie__tekst { margin-left: calc(100% / 12 * 3); }
}

.liczba {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- usługi */
.uslugi {
  position: relative;
  padding: 0 var(--margines) clamp(3.5rem, 7vw, 6rem);
}

.uslugi__naglowek,
.realizacje__naglowek,
.etapy__naglowek {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.uslugi__wstep,
.realizacje__wstep,
.etapy__wstep {
  max-width: 34rem;
  color: var(--c-stal);
}

@media (min-width: 62em) {
  .uslugi__naglowek,
  .realizacje__naglowek,
  .etapy__naglowek {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: end;
  }
  .uslugi__naglowek .tytul-sekcji,
  .realizacje__naglowek .tytul-sekcji,
  .etapy__naglowek .tytul-sekcji { grid-column: 1 / span 7; }
  .uslugi__wstep,
  .realizacje__wstep,
  .etapy__wstep { grid-column: 9 / span 4; }
}

.uslugi__lista {
  list-style: none;
  border-top: 1px solid var(--kreska);
}

.usluga {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--kreska);
  text-decoration: none;
}

.usluga__miniatura {
  grid-row: span 2;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-maly);
  object-fit: cover;
}

.usluga__nazwa {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  font-stretch: 80%;
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: transform 0.35s var(--krzywa), color 0.35s var(--krzywa);
}

.usluga__opis {
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-stal);
}

.usluga:hover .usluga__nazwa,
.usluga:focus-visible .usluga__nazwa {
  color: var(--c-blekit);
}

@media (min-width: 62em) {
  .usluga {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    padding: 1.75rem 0;
  }
  .usluga__miniatura { display: none; }
  .usluga__nazwa { grid-column: 1 / span 7; }
  .usluga__opis { grid-column: 9 / span 4; }
  .usluga:hover .usluga__nazwa { transform: translateX(0.75rem); }
}

.podglad {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 20rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 24px 48px -12px rgb(15 29 46 / 0.45);
}

.podglad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ etapy */
.etapy {
  padding: clamp(3.5rem, 7vw, 6rem) var(--margines);
  background: var(--c-granat);
  color: var(--c-kreda);
}

.etapy__wstep {
  color: rgb(246 246 243 / 0.72);
}

.etapy__uklad {
  display: grid;
  gap: 2rem;
}

/* Bez ruchu rysunek i zdjęcia etapów stoją w treści – kadr jest zbędny */
.etapy__kadr {
  display: none;
}

.etapy__lista {
  display: grid;
  gap: clamp(3rem, 8vw, 5rem);
  list-style: none;
}

.etap {
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
}

.etap__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.75rem;
  border-radius: var(--r);
  object-fit: cover;
}

.etap__numer {
  font-size: 3.5rem;
  font-stretch: 70%;
  font-weight: 380;
  line-height: 0.8;
  color: var(--c-sygnal);
  font-variant-numeric: tabular-nums;
}

.etap__tytul {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-stretch: 78%;
  font-weight: 430;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.etap p {
  color: rgb(246 246 243 / 0.78);
}

/* Z ruchem: rysunek przyklejony – na telefonie u góry ekranu, na desktopie z lewej */
.ruch-wlaczony .etapy__kadr {
  position: sticky;
  top: var(--wys-naglowka);
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  height: 46svh;
  margin-inline: calc(var(--margines) * -1);
  padding: 0.75rem var(--margines);
  background: var(--c-granat);
  box-shadow: 0 16px 24px -12px var(--c-granat);
}

.ruch-wlaczony .etap {
  min-height: 40svh;
  align-content: center;
  /* 0.66, nie mniej: opis nieaktywnego etapu musi trzymać kontrast 4.5:1 na granacie */
  opacity: 0.66;
  transition: opacity 0.5s var(--krzywa);
}

.ruch-wlaczony .etap.jest-aktywny {
  opacity: 1;
}

.ruch-wlaczony .etapy__uklad--prosty .etap {
  opacity: 1;
}

.ruch-wlaczony .etap__foto {
  display: none;
}

/* Zapas pod ostatnim etapem: kadr zostaje przyklejony, aż pieczątka „odebrano" spadnie */
.ruch-wlaczony .etapy__lista {
  padding-bottom: 18svh;
}

.ruch-wlaczony .etapy__zdjecia {
  display: none;
}

@media (min-width: 62em) {
  .etapy__uklad {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }
  .etapy__lista { grid-column: 2; gap: 0; }
  .etap { padding-block: 4rem; }

  .ruch-wlaczony .etapy__kadr {
    grid-column: 1;
    grid-row: 1;
    top: calc(var(--wys-naglowka) + 1.5rem);
    height: calc(100svh - var(--wys-naglowka) - 3rem);
    margin-inline: 0;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .ruch-wlaczony .etapy__lista { grid-row: 1; }
  .ruch-wlaczony .etap {
    min-height: 42svh;
    padding-block: 0;
  }
  .ruch-wlaczony .etap:first-child { min-height: 34svh; align-content: start; padding-top: 4svh; }
  .ruch-wlaczony .etapy__lista { padding-bottom: 22svh; }
  .ruch-wlaczony .etapy__zdjecia { display: block; }
}

/* --- rysunek budowy */
.plan {
  position: relative;
  min-height: 0;
  border-radius: var(--r);
  background: var(--c-granat-2);
}

.plan__rysunek {
  width: 100%;
  height: 100%;
  font-family: var(--font);
  font-stretch: 85%;
}

.plan__rysunek [data-typ] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.plan__rysunek [data-typ="skaluj"] {
  transform-origin: 50% 50%;
}

.plan__kreska {
  fill: none;
  stroke: var(--c-kreda);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
}

.plan__kreska--gruba {
  stroke-opacity: 0.9;
  stroke-width: 3;
  stroke-linejoin: round;
}

.plan__woda,
.plan__ogrzewanie,
.plan__kanalizacja,
.plan__prad {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan__woda { stroke: #6CB4EE; stroke-width: 4; }
.plan__ogrzewanie { stroke: #F87171; stroke-width: 2.5; }
.plan__kanalizacja { stroke: #D9822B; stroke-width: 7; }
.plan__prad { stroke: var(--c-sygnal); stroke-width: 2.5; stroke-dasharray: 7 5; }

.plan__wymiar path {
  fill: none;
  stroke: var(--c-kreda);
  stroke-opacity: 0.6;
}

.plan__wymiar text,
.plan__rzedne text {
  fill: var(--c-kreda);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.plan__rzedne text {
  text-anchor: end;
  fill-opacity: 0.45;
  transition: fill 0.4s var(--krzywa), fill-opacity 0.4s var(--krzywa);
}

.plan__rzedne [data-poziom] path {
  stroke: var(--c-kreda);
  stroke-opacity: 0.45;
  stroke-width: 2;
  transition: stroke 0.4s var(--krzywa);
}

.plan__rzedne .jest-osiagniety text {
  fill: var(--c-sygnal);
  fill-opacity: 1;
}

.plan__rzedne .jest-osiagniety path {
  stroke: var(--c-sygnal);
  stroke-opacity: 1;
}

.plan__zuraw path,
.plan__zuraw line {
  fill: none;
  stroke: var(--c-kreda);
  stroke-opacity: 0.7;
  stroke-width: 1.5;
}

.plan__kabina { fill: var(--c-sygnal); }
.plan__przeciwwaga { fill: #8D99A6; }
.plan__wozek { fill: var(--c-kreda); }

.plan__pieczatka circle,
.plan__pieczatka path {
  fill: none;
  stroke: var(--c-sygnal);
}

.plan__pieczatka-obwod {
  fill: var(--c-sygnal);
  font-size: 8.4px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.plan__pieczatka-napis {
  fill: var(--c-sygnal);
  font-size: 17px;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: 0.06em;
  text-anchor: middle;
}

.plan__fala {
  fill: none;
  stroke: var(--c-sygnal);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.plan__pieczatka {
  transform-box: fill-box;
  transform-origin: center;
}


/* --- pasek pod rysunkiem: zdjęcie z prawdziwej budowy + odczyt etapu */
.etapy__dol {
  display: flex;
  align-items: end;
  gap: 1.25rem;
}

.etapy__zdjecia {
  position: relative;
  flex: none;
  width: min(15rem, 38%);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--c-granat-2);
}

.etapy__zdjecia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
}

.etapy__zdjecia img[data-kadr="0"] {
  clip-path: inset(0);
}

.etapy__odczyt {
  font-size: 0.9375rem;
  line-height: 1.3;
  color: rgb(246 246 243 / 0.72);
  font-variant-numeric: tabular-nums;
}

.etapy__odczyt [data-odczyt-nazwa] {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-stretch: 80%;
  font-weight: 450;
  color: var(--c-kreda);
}

/* ------------------------------------------------------------- realizacje */
.realizacje {
  padding: clamp(3.5rem, 7vw, 6rem) var(--margines);
}

.realizacje__narzedzia {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Filtry i strzałki działają tylko z JS – bez niego taśma po prostu się przewija */
.realizacje:not(.ma-filtry) .realizacje__narzedzia {
  display: none;
}

.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filtr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kreska);
  border-radius: 999px;
  background: transparent;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--czas-krotki) var(--krzywa), color var(--czas-krotki) var(--krzywa), border-color var(--czas-krotki) var(--krzywa);
}

.filtr span {
  font-size: 0.8125rem;
  color: var(--c-stal);
  font-variant-numeric: tabular-nums;
}

.filtr:hover {
  border-color: var(--c-granat);
}

.filtr[aria-pressed="true"] {
  border-color: var(--c-granat);
  background: var(--c-granat);
  color: var(--c-kreda);
}

.filtr[aria-pressed="true"] span {
  color: rgb(246 246 243 / 0.7);
}

.realizacje__strzalki {
  display: none;
  gap: 0.5rem;
}

@media (min-width: 48em) {
  .realizacje__strzalki { display: flex; }
}

.strzalka {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--c-granat);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--czas-krotki) var(--krzywa), color var(--czas-krotki) var(--krzywa), opacity var(--czas-krotki) var(--krzywa);
}

.strzalka:hover:not(:disabled) {
  background: var(--c-granat);
  color: var(--c-kreda);
}

.strzalka:disabled {
  opacity: 0.3;
  cursor: default;
}

.tasma-realizacji {
  display: flex;
  gap: 1rem;
  margin-inline: calc(var(--margines) * -1);
  padding: 0 var(--margines) 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margines);
  scrollbar-width: none;
  list-style: none;
  overscroll-behavior-x: contain;
}

.tasma-realizacji::-webkit-scrollbar {
  display: none;
}

.realizacja {
  flex: 0 0 clamp(15rem, 72vw, 22rem);
  scroll-snap-align: start;
}

.realizacja__link {
  display: grid;
  text-decoration: none;
}

.realizacja__kadr {
  display: block;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--c-granat-2);
}

.realizacja img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--krzywa);
}

.realizacja__link:hover img,
.realizacja__link:focus-visible img {
  transform: scale(1.05);
}

.realizacja__link:hover .realizacja__nazwa {
  color: var(--c-blekit);
}

.realizacja__rodzaj {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  color: var(--c-sygnal-ciemny);
}

.realizacja__nazwa {
  transition: color var(--czas-krotki) var(--krzywa);
  font-size: 1.1875rem;
  font-stretch: 85%;
  font-weight: 500;
  line-height: 1.2;
}

.realizacja__meta {
  font-size: 0.875rem;
  color: var(--c-stal);
}

.tasma-postep {
  height: 2px;
  margin-top: 1.25rem;
  background: var(--kreska);
}

.tasma-postep span {
  display: block;
  height: 100%;
  background: var(--c-granat);
  transform-origin: left;
  width: 25%;
}

/* ---------------------------------------------------------------- pytania */
.pytania {
  display: grid;
  gap: 2.5rem;
  padding: clamp(3rem, 6vw, 5rem) var(--margines);
  border-top: 1px solid var(--kreska);
}

@media (min-width: 62em) {
  .pytania {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .pytania .tytul-sekcji { grid-column: 1 / span 4; }
  .pytania__lista { grid-column: 6 / span 7; }
}

.pytanie {
  border-bottom: 1px solid var(--kreska);
}

.pytanie:first-child {
  border-top: 1px solid var(--kreska);
}

.pytanie button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.pytanie svg {
  flex: none;
  transition: transform 0.35s var(--krzywa);
}

.pytanie.jest-otwarta svg {
  transform: rotate(45deg);
}

.pytanie__odpowiedz {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--krzywa);
}

.pytanie__odpowiedz > div {
  overflow: hidden;
}

.pytanie__odpowiedz p {
  max-width: 40rem;
  padding-bottom: 1.5rem;
  color: var(--c-stal);
}

.pytanie.jest-otwarta .pytanie__odpowiedz {
  grid-template-rows: 1fr;
}

/* ---------------------------------------------------------------- kontakt */
.kontakt {
  display: grid;
  gap: 3rem;
  padding: clamp(3rem, 6vw, 5rem) var(--margines) clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--kreska);
}

@media (min-width: 62em) {
  .kontakt {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .kontakt__lewa { grid-column: 1 / span 5; }
  .formularz { grid-column: 7 / span 6; }
}

.kontakt__lewa {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}

.kontakt__wstep {
  max-width: 28rem;
  color: var(--c-stal);
}

.kontakt__telefon {
  justify-self: start;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  font-stretch: 80%;
  font-weight: 420;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--c-sygnal);
  text-underline-offset: 0.18em;
}

.kontakt__dane {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}

.kontakt__dane dt {
  font-size: 0.875rem;
  color: var(--c-stal);
}

.kontakt__dane dd a {
  text-decoration-color: var(--kreska);
  text-underline-offset: 0.2em;
}

/* -------------------------------------------------------------- formularz */
.formularz,
.modal__formularz {
  display: grid;
  gap: 1.25rem;
}

.formularz {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--r);
  background: var(--c-kreda);
}

.formularz__para {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40em) {
  .formularz__para { grid-template-columns: 1fr 1fr; }
}

.zetony {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.zeton {
  position: relative;
  cursor: pointer;
}

.zeton input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zeton span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--kreska);
  border-radius: 999px;
  font-size: 0.9375rem;
  transition: background-color var(--czas-krotki) var(--krzywa), color var(--czas-krotki) var(--krzywa), border-color var(--czas-krotki) var(--krzywa);
}

.zeton:hover span {
  border-color: var(--c-granat);
}

.zeton input:checked + span {
  border-color: var(--c-granat);
  background: var(--c-granat);
  color: var(--c-kreda);
}

.zeton input:focus-visible + span {
  outline: 2px solid var(--c-blekit);
  outline-offset: 2px;
}

.pole {
  display: grid;
  gap: 0.4rem;
}

.pole__etykieta {
  font-size: 0.9375rem;
  font-weight: 500;
}

.pole__wymagane {
  margin-left: 0.15em;
  color: var(--c-sygnal-ciemny);
}

.pole__kontrolka {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(15 29 46 / 0.22);
  border-radius: var(--r-maly);
  background: #fff;
  font-size: 1rem;
  transition: border-color var(--czas-krotki) var(--krzywa), box-shadow var(--czas-krotki) var(--krzywa);
}

textarea.pole__kontrolka {
  min-height: 8rem;
  resize: vertical;
}

.pole__kontrolka::placeholder {
  color: rgb(79 91 103 / 0.8);
}

.pole__kontrolka:hover {
  border-color: rgb(15 29 46 / 0.45);
}

.pole__kontrolka:focus {
  outline: none;
  border-color: var(--c-blekit);
  box-shadow: 0 0 0 3px rgb(30 114 184 / 0.2);
}

.pole.ma-blad .pole__kontrolka {
  border-color: var(--c-blad);
}

.pole__blad {
  font-size: 0.875rem;
  color: var(--c-blad);
}

.pole__blad:empty {
  display: none;
}

.pole__pomoc {
  font-size: 0.8125rem;
  color: var(--c-stal);
}

.pole-pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formularz__komunikat {
  padding: 0.75rem 1rem;
  border-radius: var(--r-maly);
  font-size: 0.9375rem;
}

.formularz__komunikat--blad {
  background: rgb(185 28 28 / 0.1);
  color: var(--c-blad);
}

.formularz__komunikat--sukces {
  background: rgb(22 101 52 / 0.1);
  color: #166534;
}

/* ------------------------------------------------ formularz w krokach */
/* Bez JS kroki stoją jeden pod drugim; klasa .ma-kroki włącza podział */
.krok {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  border: 0;
}

.krok + .krok {
  padding-top: 1.25rem;
  border-top: 1px solid var(--kreska);
}

.ma-kroki .krok + .krok {
  padding-top: 0;
  border-top: 0;
}

.krok__tytul {
  margin-bottom: 0.25rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-stretch: 78%;
  font-weight: 450;
  line-height: 1.1;
}

.krok__tytul:focus {
  outline: none;
}

.kroki-postep {
  display: grid;
  gap: 0.5rem;
}

.kroki-postep__tekst {
  font-size: 0.875rem;
  color: var(--c-stal);
  font-variant-numeric: tabular-nums;
}

.kroki-postep__odcinki {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
}

.kroki-postep__odcinki span {
  height: 4px;
  border-radius: 2px;
  background: var(--kreska);
  background-image: linear-gradient(var(--c-sygnal), var(--c-sygnal));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s var(--krzywa);
}

.kroki-postep__odcinki span.jest-pelny {
  background-size: 100% 100%;
}

.kroki-nawigacja {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kroki-nawigacja > .przycisk {
  flex: 1 1 12rem;
}

/* ----------------------------------------------------------------- stopka */
/* Stopka stoi pod treścią i odsłania się, gdy strona „odjeżdża" w górę */
.stopka {
  position: sticky;
  bottom: 0;
  z-index: 0;
  padding: clamp(3.5rem, 7vw, 6rem) var(--margines) 1.5rem;
  background: var(--c-granat);
  color: var(--c-kreda);
}

.stopka__siatka {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 48em) {
  .stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .stopka__siatka { grid-template-columns: 5fr 3fr 3fr 3fr; }
}

.stopka__kolumna {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  font-size: 0.9375rem;
}

.stopka__kolumna h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(246 246 243 / 0.6);
}

.stopka__kolumna ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.stopka__haslo {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  font-stretch: 72%;
  font-weight: 420;
  line-height: 0.95;
}

.stopka a {
  text-decoration: none;
}

.stopka a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stopka__spolecznosci {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

.stopka__spolecznosci a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: underline;
  text-decoration-color: var(--kreska-jasna);
  text-underline-offset: 0.25em;
}

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--kreska-jasna);
  font-size: 0.8125rem;
  color: rgb(246 246 243 / 0.7);
}

/* Podpis wykonawcy strony jako tabliczka rysunkowa – pole opisowe z rogu
   planu budowlanego, w którym zawsze podaje się autora projektu. Cała
   tabliczka jest jednym odnośnikiem; po najechaniu rozjaśnia się ramka. */
.stopka__tworca {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.tabliczka {
  display: grid;
  grid-template-columns: auto auto 2.75rem;
  border: 1px solid var(--kreska-jasna);
  border-radius: var(--r-maly);
  color: var(--c-kreda);
  text-decoration: none;
  transition: border-color var(--czas-krotki), background-color var(--czas-krotki);
}

.tabliczka__pole {
  display: grid;
  gap: 0.2rem;
  align-content: center;
  min-height: 3.25rem;
  padding: 0.55rem 1rem;
}

.tabliczka__pole + .tabliczka__pole,
.tabliczka__strzalka {
  border-left: 1px solid var(--kreska-jasna);
  transition: border-color var(--czas-krotki);
}

.tabliczka__etykieta {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: rgb(246 246 243 / 0.62);
}

.tabliczka__wartosc {
  font-size: 1.0625rem;
  font-stretch: 72%;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.tabliczka__strzalka {
  display: grid;
  place-items: center;
  color: rgb(246 246 243 / 0.62);
}

.tabliczka__strzalka svg {
  transition: transform 0.25s var(--krzywa), color var(--czas-krotki);
}

.tabliczka:hover,
.tabliczka:focus-visible {
  border-color: rgb(246 246 243 / 0.45);
  background: rgb(246 246 243 / 0.04);
}

.tabliczka:hover .tabliczka__pole + .tabliczka__pole,
.tabliczka:hover .tabliczka__strzalka,
.tabliczka:focus-visible .tabliczka__pole + .tabliczka__pole,
.tabliczka:focus-visible .tabliczka__strzalka {
  border-left-color: rgb(246 246 243 / 0.45);
}

.tabliczka:hover .tabliczka__strzalka svg,
.tabliczka:focus-visible .tabliczka__strzalka svg {
  color: var(--c-kreda);
  transform: translate(2px, -2px);
}

.tabliczka:focus-visible {
  outline: 2px solid var(--c-kreda);
  outline-offset: 3px;
}

/* ------------------------------------------- pływający przycisk (mobile) */
.plywajacy-kontakt {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-plywajacy);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-maly);
  background: var(--c-sygnal);
  color: var(--c-granat);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgb(15 29 46 / 0.5);
  transform: translateY(160%);
  transition: transform 0.5s var(--krzywa);
}

.plywajacy-kontakt.jest-widoczny {
  transform: none;
}

.plywajacy-kontakt.jest-widoczny.jest-schowany {
  transform: translateY(160%);
}

@media (min-width: 62em) {
  .plywajacy-kontakt { display: none; }
}

/* --------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-zaslona);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 1rem;
  background: rgb(15 29 46 / 0.97);
  color: var(--c-kreda);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--krzywa), visibility 0s linear 0.3s;
}

.lightbox.jest-otwarty {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s var(--krzywa), visibility 0s;
}

.lightbox__pasek {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lightbox__licznik {
  font-variant-numeric: tabular-nums;
}

.lightbox__scena {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

.lightbox__obraz {
  /* width/height w HTML są tylko dla audytów – rozmiar wyznacza zdjęcie */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r);
}

.lightbox__przycisk {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--kreska-jasna);
  border-radius: 50%;
  background: rgb(15 29 46 / 0.6);
  cursor: pointer;
  transition: background-color var(--czas-krotki) var(--krzywa);
}

.lightbox__przycisk:hover {
  background: var(--c-granat-2);
}

.lightbox__przycisk--wstecz,
.lightbox__przycisk--dalej {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.lightbox__przycisk--wstecz { left: 0; }
.lightbox__przycisk--dalej { right: 0; }

.lightbox__podpis {
  padding-top: 1rem;
  text-align: center;
}

.lightbox__tytul {
  font-size: 1.25rem;
  font-stretch: 85%;
  font-weight: 500;
}

.lightbox__opis {
  color: rgb(246 246 243 / 0.72);
}

/* ------------------------------------------------------------------ modal */
.zaslona {
  position: fixed;
  inset: 0;
  z-index: var(--z-zaslona);
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(15 29 46 / 0.6);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--krzywa), visibility 0s linear 0.3s;
}

.zaslona.jest-otwarta {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s var(--krzywa), visibility 0s;
}

.modal {
  position: relative;
  display: grid;
  gap: 1rem;
  width: min(100%, 30rem);
  max-height: calc(100svh - 2rem);
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--r);
  background: var(--c-kreda);
  transform: translateY(1rem);
  transition: transform 0.4s var(--krzywa);
}

.zaslona.jest-otwarta .modal {
  transform: none;
}

.modal__zamknij {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.modal__zamknij:hover {
  background: rgb(15 29 46 / 0.06);
}

.modal__tytul {
  padding-right: 2.5rem;
  font-size: 2.25rem;
  font-stretch: var(--waski);
  font-weight: 420;
  line-height: 1;
}

.modal__opis {
  color: var(--c-stal);
}

/* ---------------------------------------------------------------- cookies */
.cookies {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: var(--z-cookies);
  display: grid;
  gap: 0.9rem;
  width: min(calc(100% - 2rem), 28rem);
  padding: 1.5rem;
  border-radius: var(--r);
  background: var(--c-kreda);
  box-shadow: 0 20px 48px -12px rgb(15 29 46 / 0.4);
  visibility: hidden;
  transform: translateY(calc(100% + 1rem));
  transition: transform 0.5s var(--krzywa), visibility 0s linear 0.5s;
}

.cookies.jest-widoczny {
  visibility: visible;
  transform: none;
  transition: transform 0.5s var(--krzywa), visibility 0s;
}

.cookies__tytul {
  font-size: 1.25rem;
  font-stretch: 85%;
  font-weight: 500;
}

.cookies__opis,
.cookies__wyjasnienie {
  font-size: 0.875rem;
  color: var(--c-stal);
}

.cookies__szczegoly {
  display: none;
}

.cookies.ma-szczegoly .cookies__szczegoly {
  display: grid;
  gap: 0.75rem;
}

.cookies [data-cookies-zapisz] {
  display: none;
}

.cookies.ma-szczegoly [data-cookies-zapisz] {
  display: inline-flex;
}

.cookies__opcja {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--kreska);
}

.cookies__nazwa {
  font-weight: 500;
}

.cookies__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cookies__link {
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 0;
  background: none;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.przelacznik {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.6rem;
}

.przelacznik input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.przelacznik__galka {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(15 29 46 / 0.25);
  pointer-events: none;
  transition: background-color var(--czas-krotki) var(--krzywa);
}

.przelacznik__galka::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--czas-krotki) var(--krzywa);
}

.przelacznik input:checked + .przelacznik__galka {
  background: var(--c-granat);
}

.przelacznik input:checked + .przelacznik__galka::after {
  transform: translateX(1.15rem);
}

.przelacznik input:disabled + .przelacznik__galka {
  opacity: 0.55;
}

.przelacznik input:focus-visible + .przelacznik__galka {
  outline: 2px solid var(--c-blekit);
  outline-offset: 2px;
}

/* ------------------------------------------ stany początkowe animacji */
/* Otwarcie hero idzie w CSS, nie w Motion: rusza z pierwszym malowaniem,
   więc największy element (LCP) nie czeka na pobranie i wykonanie modułu JS.
   `backwards` trzyma stan początkowy tylko w czasie opóźnienia – potem
   transformację zdjęcia przejmuje paralaksa z Motion. */
@keyframes hero-linia {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}

@keyframes hero-dol {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-foto {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hero-obraz {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}

.ruch-wlaczony [data-linia] {
  animation: hero-linia 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

.ruch-wlaczony .linia + .linia [data-linia] {
  animation-delay: 0.4s;
}

.ruch-wlaczony [data-hero-dol] {
  animation: hero-dol 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

.ruch-wlaczony [data-hero-foto] {
  animation: hero-foto 1.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.ruch-wlaczony [data-hero-foto] img {
  animation: hero-obraz 1.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ======================================================================
   PODSTRONY USŁUG (uslugi/*.html – generowane przez
   tools/build-uslugi.php)
   ====================================================================== */

/* Na podstronach nie ma ciemnego zdjęcia pod nagłówkiem */
.naglowek--jasny {
  background: var(--c-beton);
  color: var(--c-granat);
  box-shadow: 0 1px 0 var(--kreska);
}

.usluga-hero {
  display: grid;
  gap: 2rem;
  padding: calc(var(--wys-naglowka) + 1.5rem) var(--margines) clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 62em) {
  .usluga-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: end;
    min-height: min(52rem, 100svh);
  }
  .usluga-hero__tresc { grid-column: 1 / span 6; }
  .usluga-hero__foto { grid-column: 8 / span 5; }
}

.usluga-hero__tresc,
.usluga-hero__blok {
  display: grid;
  gap: 1.5rem;
}

.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  list-style: none;
  font-size: 0.875rem;
  color: var(--c-stal);
}

.okruszki li {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.okruszki li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgb(79 91 103 / 0.5);
}

.okruszki a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-underline-offset: 0.2em;
}

.okruszki a:not(:hover) {
  text-decoration-color: var(--kreska);
}

.usluga-hero__tytul {
  font-size: clamp(2.75rem, 1rem + 5.6vw, 6.5rem);
  font-stretch: 70%;
  font-weight: 420;
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.usluga-hero__miejsce {
  margin-top: 0.35em;
  font-size: 0.34em;
  font-stretch: 90%;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-stal);
}

.usluga-hero__lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
}

.usluga-hero__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.usluga-hero__foto {
  overflow: hidden;
  border-radius: var(--r);
  background: var(--c-granat-2);
}

.usluga-hero__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Wstęp: nagłówek po lewej, tekst po prawej */
.wstep-uslugi {
  display: grid;
  gap: 2rem;
  padding: clamp(3rem, 6vw, 5rem) var(--margines);
  border-top: 1px solid var(--kreska);
}

.wstep-uslugi__tekst {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

.wstep-uslugi__tekst p:first-child {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.4;
}

.wstep-uslugi__tekst p + p {
  color: var(--c-stal);
}

@media (min-width: 62em) {
  .wstep-uslugi {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .wstep-uslugi .tytul-sekcji { grid-column: 1 / span 5; }
  .wstep-uslugi__tekst { grid-column: 7 / span 6; }
}

/* Proces na podstronach: zwarta siatka kroków na całą szerokość */
.etapy__uklad--prosty .etapy__lista {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.etapy__uklad--prosty .etap {
  max-width: none;
  align-content: start;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: var(--r);
  background: var(--c-granat-2);
}

.etapy__uklad--prosty .etap__numer {
  font-size: 2.5rem;
}

.etapy__uklad--prosty .etap__tytul {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
}

.etapy__uklad--prosty .etap p {
  font-size: 0.9688rem;
  line-height: 1.55;
}

/* Oferta: wiersze jak na stronie głównej, bez linków */
.oferta {
  padding: clamp(3.5rem, 7vw, 6rem) var(--margines);
}

.oferta__lista {
  list-style: none;
  border-top: 1px solid var(--kreska);
}

.oferta__pozycja {
  display: grid;
  gap: 0.75rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--kreska);
}

.oferta__nazwa {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  font-stretch: 80%;
  font-weight: 450;
  line-height: 1.1;
}

.oferta__opis {
  max-width: 34rem;
  color: var(--c-stal);
}

.oferta__punkty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  list-style: none;
}

.oferta__punkty li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--kreska);
  border-radius: 999px;
  font-size: 0.875rem;
}

@media (min-width: 62em) {
  .oferta__pozycja {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .oferta__nazwa { grid-column: 1 / span 6; }
  .oferta__szczegoly { grid-column: 8 / span 5; }
}

.zakres-prac {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.zakres-prac__grupa h3 {
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-stretch: 85%;
  font-weight: 500;
}

.zakres-prac__grupa > p {
  max-width: 40rem;
  margin-bottom: 1rem;
  color: var(--c-stal);
}

.zakres-prac__grupa ul {
  columns: 16rem;
  column-gap: 2rem;
  padding-left: 1.1rem;
}

.zakres-prac__grupa li {
  margin-bottom: 0.4rem;
  break-inside: avoid;
}

.zakres-prac__grupa li::marker {
  color: var(--c-sygnal-ciemny);
}

/* Pozostałe usługi – linkowanie wewnętrzne */
.pozostale {
  padding: clamp(3rem, 6vw, 5rem) var(--margines);
  border-top: 1px solid var(--kreska);
}

.pozostale .tytul-sekcji {
  margin-bottom: 2rem;
}

.pozostale ul {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--kreska);
}

@media (min-width: 48em) {
  .pozostale ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

.pozostale a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  border-bottom: 1px solid var(--kreska);
  font-size: 1.25rem;
  font-stretch: 85%;
  font-weight: 450;
  text-decoration: none;
  transition: color var(--czas-krotki) var(--krzywa);
}

.pozostale a:hover {
  color: var(--c-blekit);
}

.ruch-wlaczony .etapy__uklad--prosty .etap {
  min-height: 0;
  padding: 1.5rem;
}

/* ======================================================================
   PODSTRONY REALIZACJI (realizacje/*.html – generowane przez
   tools/build-realizacje.php)
   ====================================================================== */
.projekt__glowa {
  display: grid;
  gap: 2rem;
  padding: calc(var(--wys-naglowka) + 1.5rem) var(--margines) clamp(3rem, 6vw, 5rem);
}

@media (min-width: 62em) {
  .projekt__glowa {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }
  .projekt__tresc { grid-column: 1 / span 6; padding-top: 1rem; }
  .projekt__foto { grid-column: 7 / span 6; }
}

.projekt__tresc {
  display: grid;
  gap: 1.5rem;
}

.projekt__tytul {
  font-size: clamp(2.5rem, 1rem + 4.4vw, 5.25rem);
  font-stretch: 72%;
  font-weight: 420;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.projekt__lead {
  max-width: 36rem;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}

.projekt__fakty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--kreska);
}

.projekt__fakty div {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--kreska);
}

.projekt__fakty dt {
  font-size: 0.8125rem;
  color: var(--c-stal);
}

.projekt__fakty dd {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
}

.projekt__fakty a {
  color: var(--c-blekit);
  text-underline-offset: 0.2em;
}

.projekt__foto button {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--r);
  background: var(--c-granat-2);
  cursor: zoom-in;
}

.projekt__foto img {
  width: 100%;
  max-height: 78svh;
  object-fit: cover;
}

.projekt__foto figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--c-stal);
}

.projekt__opis {
  display: grid;
  gap: 2rem;
  padding: clamp(3rem, 6vw, 5rem) var(--margines);
  border-top: 1px solid var(--kreska);
}

.projekt__opis a {
  color: var(--c-blekit);
  text-underline-offset: 0.2em;
}

@media (min-width: 62em) {
  .projekt__opis {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .projekt__opis .tytul-sekcji { grid-column: 1 / span 5; }
  .projekt__opis .wstep-uslugi__tekst { grid-column: 7 / span 6; }
}

.inne-realizacje {
  padding: clamp(3rem, 6vw, 5rem) var(--margines);
  border-top: 1px solid var(--kreska);
}

/* Na podstronach karty stoją w siatce, nie w przewijanej taśmie */
.tasma-realizacji--siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 2rem 1rem;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}

.tasma-realizacji--siatka .realizacja {
  flex: none;
}

/* Podstrony usług: proces bez rysunku zajmuje całą szerokość (nadpisuje układ z kadrem) */
@media (min-width: 62em) {
  .etapy__uklad.etapy__uklad--prosty {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .etapy__uklad--prosty .etapy__lista {
    grid-column: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: 0;
  }
}

/* ==========================================================================
   GALERIA ZDJĘĆ Z BUDOWY (realizacje/*.html – pole „galeria" w danych)
   ========================================================================== */
.galeria {
  padding: clamp(3rem, 6vw, 5rem) var(--margines);
  border-top: 1px solid var(--kreska);
}

.galeria__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  list-style: none;
}

@media (min-width: 48em) {
  .galeria__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
}

@media (min-width: 75em) {
  .galeria__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.galeria__kafel {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--r);
  background: var(--c-granat-2);
  cursor: zoom-in;
}

.galeria__kafel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--krzywa), opacity var(--czas-krotki);
}

.galeria__kafel:hover img {
  transform: scale(1.04);
}

.galeria__kafel:focus-visible {
  outline: 2px solid var(--c-blekit);
  outline-offset: 3px;
}

/* „Przed" i „Po" przy zdjęciach modernizacji */
.galeria__etap {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-maly);
  background: var(--c-granat);
  color: var(--c-kreda);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   KATALOGI (/uslugi/, /realizacje/)
   ========================================================================== */
.katalog {
  padding: calc(var(--wys-naglowka) + 1.5rem) var(--margines) clamp(3.5rem, 7vw, 6rem);
}

.katalog__glowa {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.katalog__tytul {
  font-size: clamp(3rem, 1rem + 6.4vw, 7.5rem);
  font-stretch: 70%;
  font-weight: 420;
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.katalog__lead {
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--c-stal);
}

/* ==========================================================================
   DOKUMENT (polityka prywatności) i POTWIERDZENIE (thankyou.html)
   ========================================================================== */
.dokument {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: calc(var(--wys-naglowka) + 1.5rem) var(--margines) clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 62em) {
  .dokument {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }
  .dokument__glowa { grid-column: 1 / -1; }
  .dokument__spis {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--wys-naglowka) + 1.5rem);
  }
  .dokument__tresc { grid-column: 6 / span 7; }
}

.dokument__glowa {
  display: grid;
  gap: 1rem;
}

.dokument__data {
  font-size: 0.875rem;
  color: var(--c-stal);
}

.dokument__spis {
  display: grid;
  gap: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kreska);
  font-size: 0.9375rem;
}

.dokument__spis h2 {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-stal);
}

.dokument__spis a {
  display: block;
  padding: 0.35rem 0;
  color: var(--c-granat);
  text-decoration: none;
}

.dokument__spis a:hover {
  color: var(--c-blekit);
}

.dokument__tresc {
  display: grid;
  gap: 2.5rem;
  max-width: 44rem;
  line-height: 1.65;
}

.dokument__tresc section {
  display: grid;
  gap: 0.9rem;
  scroll-margin-top: calc(var(--wys-naglowka) + 1rem);
}

.dokument__tresc h2 {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-stretch: 85%;
  font-weight: 500;
  line-height: 1.2;
}

.dokument__tresc h3 {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.dokument__tresc ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.25rem;
}

.dokument__tresc a {
  color: var(--c-blekit);
  text-underline-offset: 0.2em;
}

.potwierdzenie {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
  min-height: 100svh;
  padding: calc(var(--wys-naglowka) + 2rem) var(--margines) clamp(3.5rem, 7vw, 6rem);
}

.potwierdzenie__znak {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--c-sygnal);
  color: var(--c-granat);
}

.potwierdzenie__opis {
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--c-stal);
}

.potwierdzenie__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.potwierdzenie__stopka {
  font-size: 0.9375rem;
  color: var(--c-stal);
}

.potwierdzenie__stopka a {
  color: var(--c-blekit);
}